RealcomBiz

How Strong Design Opinions Can Help Heighten Designers Prominence?

by Durodola Ridwan | Saturday, September 27, 2014 |
Every designer has different opinions on design, and what they think about design greatly influences their work. In fact, the designers having strong opinions most likely end up delivering valuable work, and thus are able to build a prominence in the web design community. So, if you're one such designer then you should think about sharing your opinions with other designers across the world, as it might help improve your visibility in the design community and boost your career.




Let's have an overview of some of the following reasons as to why and how you should share your design opinions:

Read more→

CSS Cursors: An Ultimate Guide

by Durodola Ridwan | Monday, September 22, 2014 |
The typical browser will display the mouse pointer over any blank part of a web page, the gloved hand over any item that is linked (click-able) and the edit cursor over any text or text field. With CSS you can redefine those properties to display a variety of different cursors.



You have to be mindful of how you manipulate your cursor. CSS cursors (built-in or custom) should be used as a hint to the user as to know what action the mouse can perform. Let’s take a look at an example that doesn’t use custom cursors to illustrate a common use-case: drag and drop. To give users a visual clue that an item is draggable, a CSS cursor property with move as value should be set. Or a case of a resizeable box, these has to be indicated. Below is a code snippet that change mouse cursor icon to move.
Read more→

HTML5 Properties You May Not Be Acquainted With

by Durodola Ridwan | Thursday, September 18, 2014 |
The little squeezes and spreads that HTML5 has been powering the web solutions with over the years has already perched it among the most hotly pursued web development platforms. Giving the web developers and web designers a considerable cause for pause, HTML5 comes blazing with features and capabilities that are transformation in nature. And thus, it has helped enterprises to power their way ahead formidably and dominantly.



However, there is a ragtag of conceptions and misconceptions going around, under the pile of which, certain must-understand points are finding it a struggle to get through.

Read more→

CSS Filter: Convert Colored Images to Grayscale, Sepia, Saturate, Invert and more

by Durodola Ridwan | Tuesday, September 16, 2014 |
With advancements in the standards of Cascaded Style Sheets (CSS), doing a number of things in web design and development is becoming increasingly easier and fun. The latest specification (CSS3) has brought lots of new features, among the best is CSS filters. Filters allow you to modify the display of images in a variety of ways, some of those ways of displaying images as black and white, grayscale, sepia, invert, saturate, hue-rotate and more. Though, this feature is not yet widely supported, but they are indeed impressive and a modern need for web imagery.


Read more→

Create Free Custom Branded Short URL

by Durodola Ridwan | Sunday, September 07, 2014 | |
You probably have see top sites like New York Times, TechCrunch, Mashable, The Next Web and others sharing fancy short links across their social media profiles and you wondered how they did that. Well there's just a simple short trick behind it.
The benefits to having your own custom short URL are things like consistent branding and increased link trust as readers know exactly where it will lead - no one likes clicking on random links.



Also, by using your own custom branded short link, you reinforce your brand awareness, as well as ensure that you're taking full advantage of all the benefits shortened links offer. Whenever you use a link shortening service, like bit.ly, the new shortened link comes with tracking information. The service will track clicks made on the shortened link and gives you valuable metrics and information.

Here are few examples of shortened links:
  • bit.ly (Bitly)
  • goo.gl (Google)
  • ow.li (Hootsuite)
  • youtu.be (YouTube)
  • nyti.ms (New Your Times)
  • tcrn.ch (TechCrunch)
  • tnw.to (The Next Web)

Read more→

5 Awesome Styles for Ordered List

by Durodola Ridwan | Tuesday, August 26, 2014 |
Styling ordered lists was always a tricky task and I guess am not the only one who thinks that. Thankfully it's also not impossible. Recently, I came across a tutorial written by Roger Johansson which explain how we can use the :before pseudo element to style our ordered lists.

Styled numbers will only be visible in CSS3 supported browsers, but fallback (list-style-type: decimal !ie;) is provided so that default unstyled numbers are displayed in old browsers.



The idea is simple, we disable the default numbering with list-style: none; then we use counter-reset and counter-increment to create a counting scope and increment the count. The :before pseudo-element is used to give the numbering styles and content: inserts the index of the created counter.

Note: The numbering don't have to be numbers or alphabet only. To use upper-roman numerals change the content rule to content: counter(ol-counter, upper-roman);

disc (• • •)
circle (○ ○ ○)
square (▪ ▪ ▪)
decimal (1 2 3)
decimal-leading-zero (01, 02, 03)
lower-roman (i ii iii)
upper-roman (I II III)
lower-greek (α β γ)
lower-latin (a b c)
upper-latin (A B C)
armenian (Ա Բ Գ)
georgian (ა ბ გ)
lower-alpha (a b c)
upper-alpha (A B C)

Read more→

Remove Unused CSS to Reduce your Stylesheets Size

by Durodola Ridwan | Wednesday, August 20, 2014 | |
We all like creating new stuffs and updating our site theme to meet up with the latest trends. We added new features, let's say a widget and after some times, we believe it is outdated and decide to trash it out. Most times we remove the widget forgetting to dig-out the styles from the stylesheets. The styles becomes an unused or dead CSS selectors.

It is important to remove the unused CSS selectors to speed-up browser rendering of your website. And even if the effect of this unused selectors on your site performance is minimal, it would make your task of maintaining CSS easier if the files are kept clean and well-structured.


Read more→

Panda 4.0 Fix: Unblock CSS and JavaScript from Google Fetching

by Durodola Ridwan | Thursday, August 07, 2014 | | |
The search engine giant frequently updates its algorithm to keep returning high quality results to its users’ search queries. Panda 4.0 update was aimed at trashing out low quality content.

Joost de Valk, the brains behind the popular WordPress SEO tool Yoast, uncovered that many sites got hit and drop down in search traffic by 50% after the roll-out of panda 4.0. Anyway, It's observed that many sites that were hit hard by Google’s Panda 4.0 update returned to their normal rankings within a week after unblocking their CSS and JavaScript.

Read more→

HTML Imports: Import HTML Files Into Another HTML Files

by Durodola Ridwan | Sunday, July 27, 2014 | |
Most of us are familiar with <script src> which we use in loading JavaScript, <link rel="stylesheet"> for CSS, <img> for images, <video> for videos, and <audio> for audios. But we don't have a more declarative way to load HTML. Whilst It's possible to load HTML with iframes element or the JavaScript method XMLHttpRequest(). HTML imports provide a much cleaner way to load self-contained components into web pages.


HTML Import is an exciting new HTML5 feature that allow us to include an HTML file into another HTML file. You're not limited to markup either. An import can also include CSS, JavaScript, or anything else an .html file can contain.
Read more→

10 Amazing Things I Bet You Didn't Know You Could Do With CSS

by Durodola Ridwan | Sunday, May 18, 2014 |
CSS is almost certainly one of the best developments in web design since the first graphical web browsers were adopted on a wide scale. Where tables created clunky, slow-loading pages, CSS created much more streamlined and usable web pages. Also, CSS has allowed developers and designers to achieve a number of different styles that used to only be possible with images.

Being able to adapt to new ideas and different techniques, as well as seeking new solutions to old problems is part and parcel of being a web designer/developer. And with the speed at which CSS development is constantly moving, keeping up with new developments can be challenging.



Recently, I came across some useful CSS features I believe it will be new to most developers. So, I thought I had to share them with you. Enjoy!


1. The border Property

When dealing with borders. Usually, we sets border-width, border-style, and border-color all in a single declaration, like:

.class {
  border: 1px solid black;
}

But since each of the properties that the border property represents is itself a shorthand property. So we can also do these with border-width:

.class {
  border-width: 1px 4px 3px 6px;
}

This will set different widths for each four sides of the border. And can also be done with border-style and border-color.

Each of those properties can be broken down even further with border-top-width, border-bottom-style, border-left-color, and so on. See the below example:




2.  Three New Values Are Available for background Property

In CSS2.1 the background shorthand property included 5 longhand values which are: background-color, background-image, background-repeat, background-attachment, and background-position. In CSS3, we now have three new values - background-size, background-clip and background-origin.

The background-size property specifies the size of the background images. The contain values scales the image, while preserving its aspect ratio (if any), which may leave uncovered space. The cover scales the image so that it covers the whole area, completely covering the element.

With possible values of border-box and padding-box, the background-clip property determines whether the background position is relative to the border or the padding, specifying whether an element’s background extends underneath its border. This only has any visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference.

The background-origin property determines how the background-position is calculated. Takes one or two parameters: border-box, padding-box and content-box.

So the syntax looks like this:

.class {
background: black url(img.png)
no-repeat
scroll
center center / 50%
content-box
content-box;
}

Note: If one of the properties in the shorthand declaration is the background-size property, you must use a / (slash) to separate it from the background-postion property. As in the example above, we specify center center for the background-position, then separate it with a slash from 50% which happens to be the background-size.


3. You Can Use Unicode as CSS Classes

Some developers camelcase class names, others use dashes, and others use underscores. But I haven't seen any developer using Unicode in is document.

The idea is that you can use unicode characters for class names in your HTML, and write CSS selectors with those same characters.

<div class="❤">
I Can See The Pines Are Dancing
</div>
<div class="□">
I Can See The Pines Are Dancing
</div>

We then declare styles for the class:

.❤ {
background: white;
border: 1px solid black;
}

.□ {
background: white;
border: 1px solid red;
}

Although, you can use Unicode as CSS classes and yes it works in IE6 and yes it validates. But I don't advise you to use it!


4.  You Can Use Keyword Values for border-width

The shorthand property border-width sets the width of the border on all four sides of an element using the values specified. In addition to the standard length values (px, pt, em, and so on), the border-width property now accepts three keyword values: thin, medium, and thick. Percentage values are not allowed.

The keyword with values of thin, medium, and thick aren’t explicitly defined - their display will depend on the user agent, but have the following meaning: thin - medium - thick.

As an example, Internet Explorer versions (up to and including 7) sizes thin, medium, and thick borders at 2px, 4px, and 6px respectively, while Firefox 2.0 sizes them at 1px, 3px, and 5px. Internet Explorer version 8 now falls in line with other modern browsers and renders the border thickness at 1px, 3px, and 5px respectively.

inherit - Is a keyword indicating that all four values are inherited from their parent's element calculated value.


5. text-decoration Property is Now a Shorthand

The property is used to add visual emphasis to content that is independent from the text's font style, weight or other properties.

The property supported five values: none, underline, overline, line-through, and blink.

In CSS3, text-decoration is now a shorthand property, incorporating the following new properties (written in this order):

  • text-decoration-line, which supports the five values from CSS 2.1
  • text-decoration-style, which supports the values: solid, double, dotted, dashed, wavy 
  • text-decoration-color, which supports any CSS color value.

This is now standard, according to the spec:

.text {
  text-decoration: underline dashed red;
}

The new property is in process of being implemented. It is backward compatible but forward incompatible. What this means is that CSS2 rules work in CSS3 but a CSS3 rule specifying the three values is totally invalid in CSS2. For best, support a CSS3 text-decoration rule with a fallback like this:

.text {
  text-decoration: underline;
  text-decoration: underline dashed red;
}


6.  Pointers Events

The CSS property pointer-events allow authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. The pointer-events property is even more JavaScript-like, preventing:

  • The default cursor pointer from displaying
  • CSS hover and active state triggering
  • JavaScript click events from firing
  • Click actions from doing anything

The pointer-events property can have many values: auto, none, visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, and inherit. The none value prevents the click state, and cursor actions:

Examples

Example 1:

/* Makes all the img non-reactive */
img {
pointer-events: none;
}

Example 2:

Makes the link to http://example2.com non-reactive.

<ul>
<li><a href="http://example1.com">example1</a></li>
<li><a href="http://example2.com">example2</a></li>
</ul>

a[href="http://example2.com"] {
pointer-events : none ;
}

Example 3:

/* do nothing when clicked or activated */
.disabled { pointer-events: none; }

/* this will not trigger because of the pointer-events: none application */
document.getElementById("disabled").addEventListener("click", function(e) {
alert("Clicked!");
});

Note: Mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture or bubble phases.


7.  border-image Seems to Be Overlooked

Although, this is not a new thing, but I believe only few developers know about this feature. The border-image property is a shorthand property for setting the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.

The idea is that you can create flexible boxes with custom borders with a single div and a single image. Here’s what the syntax looks like, with the necessary proprietary syntax included:

.example {
border-width : 40px 30px 10px 20px;
-moz-border-image : url("border-image.png") 40 30 10 20 round;
-webkit-border-image : url("border-image.png") 40 30 10 20 round;
-o-border-image : url("border-image.png") 40 30 10 20 round;
border-image : url("border-image.png") 40 30 10 20 round;
}

The notation is broken up into three sections. The first is the URL that points to the image. The second section (the four numeric values) is the border-image-slice values which represent inward offsets from the top, right, bottom, and left edges of the image respectively, dividing it into nine regions: four corners, four edges, and a middle. While the third part of the shorthand rule tells the browser how to treat the middle sections of your image - the ones that will go along the edges of your element. Repeat (repeat, or tile, the image) and stretch (stretch, or scale, the image) are pretty self-explanatory. Round means tile the image but only so that a whole number of tiles fit, and otherwise scale the image. Right now, Safari and Chrome interpret round as repeat.

In order for border-image to work correctly, the element to which it’s applied must have the border (or border-width) property set with four values corresponding to the values given in the shorthand notation (otherwise your image slices will be stretched to fill the border width, which is rarely what you want). The four values behave similarly to margin and padding values. You can learn more about border-image from here and here.


8.  There’s an empty-cells Property

This property controls the rendering of the borders and backgrounds of cells that have no visible content in a table that’s using the separated borders model. If the collapsing model is used, this property will be ignored.

/* This style rule hides empty cells in the table element with the class ID "examples" */
.examples td {
  empty-cells: hide;
}

Three values can be set for empty-cell: show, hide, and inherit.

show - The value show means borders will be drawn around empty cells, and backgrounds will be drawn behind them.
hide - The value hide means that no borders or backgrounds will display empty cells. If all the cells in a row have this setting for empty-cells, and none of them have any visible content, the entire row will behave as if it had display:none. It support all major browsers including IE8.


9.  The color Property Isn’t for Text Only

As anyone who codes CSS knows, the color property in CSS defines the color of the text in a specified element. I’ve often wondered why this property was not named text-color or something similar.

According to the specs, here’s what the color property is supposed to do:

"This property describes the foreground color of an element’s text content. In addition it is used to provide a potential indirect value… for any other properties that accept color values."

Take a look at the example below:

.element {
background : #fff;
width : 100px;
height : 100px;
color : purple;
border : solid 2px;
}

Here’s what the above code produces:



The color of the border is not defined, but the purple value from the color property is used for the border color, because the border of an element is considered part of the foreground. This works the same in every browser. Of course, if the border property included a color value (which is almost always the case), then that would override the previously-defined color.

You can see another great example here. As you can see on the link page. The color property is applied only to the body element, and everything on the page shares the same color including: The alt text displayed on a missing image, the border on the list element, the bullet on the unordered list, the number marker on the ordered list, and the hr element. Big thanks to Louis Lazaris for this wonderful tip.


10.  Slide Up and Slide Down

CSS transitions often make it easy to replace effects with CSS animations that render much smoother on slower devices and computers assuming you’re running a browser that’s reasonably recent.
Most times we use jQuery’s .slideDown() and .slideUp() methods to do this sort of thing, but if you are actually trying to run that on most phones today, you’ll find that the animation is pretty jerky as it runs without hardware rendering assistance using only the CPU rather than the GPU. But what if I tell you that you can accomplish this task with CSS only?

/* slider in open state */
.slider {
overflow-y: hidden;
max-height: 500px;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* close it with the "closed" class */
.slider.closed {
max-height: 0;
}

As seen above, we'll make the height play nice with the max-height property. We'll set that property value to a reasonable default and then create another class to set that max-height to 0, thus sliding the element in.

A word of caution – some of these features will not work in older versions of IE (9 and below). If these browsers are a large portion of your demographic, I am afraid that you will have to rely on fallbacks.

I am sure most experienced CSS developers will knew many, if not all the above listed features. But for starter, you might be surprised with most of them. Let me know in the comment if I have missed any cutting edge CSS features.
Read more→

Image-Free Custom Checkboxes and Radio Buttons with CSS3

by Durodola Ridwan | Tuesday, April 22, 2014 |
With CSS3 we can customize web presentations or form elements to be almost anything we want. Some of the form elements that are a bit tricky to style are checkboxes and radio buttons. If you have been battling with the styling, then this post is for you.


  View Demo  

The overall idea is that you make the default radio buttons and checkboxes invisible by setting their opacity to zero, and replace them with CSS3 styling. Then use the :checked and :disabled selector to alternate the styling between their checked, unchecked and disabled versions.

Read more→

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger