RealcomBiz

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→

10 CSS3 Effects Libraries to Spice Up Your Designs

by Durodola Ridwan | Friday, April 18, 2014 |
The latest CSS3 properties have opened a multitude of new doors to web designers and developers. It's now possible to create animations and interactivity entirely in CSS markup, without going near Flash, Silverlight or After Effects.
Also, having a bunch of JavaScript execute complex code in order to animate an on screen element is less than ideal. Plus animations through JavaScript occasionally need non semantic HTML to be inserted in order to make everything happen. This is exactly why CSS3 effects are awesome.

If you want to take advantage of these modern CSS capabilities, one best solution is to use CSS effects libraries. Luckily this post features 10 best CSS effects libraries you can use to spruce up your design. Enjoy!


Magic CSS3 Animations

Magic CSS3 Animations is a package of CSS3 animations with special effects that you can freely use for your web projects. Simple include the CSS style: magic.css or include the minified version: magic.min.css. There are special effects like bling, perspective, rotate, static, slide, tin, math, bomb etc.
Also they have mentioned about new version release in future with more effects. Each of these effects has their own classes. In order to apply the effect to your html element, you just have to add the respective classes to the targeted elements via JavaScript. Magic is simple to use and most of the animations are cross-browser compatible.



Read more→

Keeping it Simple with Responsive Web Design - Infographic

by Durodola Ridwan | Thursday, April 17, 2014 | |
Responsive Web Design is being hailed as an excellent solution to the problem of keeping all visitors to your website happy, regardless of whether they are browsing via a smartphone, tablet or PC.

The fundamental concept that is the driving force behind responsive web design is referred to as progressive enhancement or PE for short. It is based on the premise that designs need to be built from the ground up, so that a website design is capable of being seen in its best light and is still user-friendly regardless of whether the platform being used by the surfer is the most suitable or not.

PE is driven by the belief that the primary goal is to optimize a website for mobile users, with any added enhancements to keep PC users happy, added at a later stage. When you consider that an estimated 60% of all daily internet surfers use a mobile device in order to access content online, you can soon appreciate why it is so important to use Responsive Web Design, and why you risk alienating potential customers or visitors to your site, who may quickly navigate away again if the site is not as responsive as they would like or the pages do not offer optimized viewing.

Making Responsive Web Design an integral part of your site is not as challenging as you might believe, even some relatively small but subtle adjustments to your existing site can offer you the chance to provide content and images that are scaled based on proportions, which means than your website will look great to both a mobile web user and a PC user.

This infographic helps to explain what is behind Responsive Web Design and helps to illustrate why a user-friendly website that accommodates a growing number of mobile web users, is going to have a competitive advantage over sites that do not make allowances for the different types of surfers who are accessing their website.


Source

Download larger version of this infographic.
Read more→

10 Best Node.js Books for Beginners

by Durodola Ridwan | Tuesday, April 15, 2014 | |
I don't need to bore you with all the story of node.js or what it does. I will just give you a brief note about it. Node.js is a software platform for scalable server-side and networking applications. Node.js applications are written in JavaScript, and can be run within the Node.js runtime on Windows, Mac OS X and Linux with no changes.

For performance and scalability. Node is fast. That’s a pretty important requirement when you’re a start-up trying to make the next big thing and want to make sure you can scale quickly, coping with an influx of users as your site grows.

As someone who’s looking to learn more about this software platform, you will need some great resources to help ease your woes, and that's what this post encompass. We have compiled 10 best books that if you are just starting out to learn node.js. I guarantee you that you'll find it useful.


Learning Node: By Shelley Powers

This is a 16 chapters and 282 pages information loaded node.js book. With is guide, you will learn how to write fast, highly scalable network applications on this JavaScript-based platform. You will also learn how to create a server with Node.js, Connecting with MySQL database, handling Form data, Using Mongodb as alternative to MySQL database, Working with Express framework, Graphics and Media access, Sending email, Node.js API, ETC.



Read more→

Textillate.js - Animate Text With CSS3

by Durodola Ridwan | Saturday, April 12, 2014 | |
Textillate.js is an amazing jQuery plugin that creates stunning CSS3 text animation. Although, there are some other jQuery plugins linke Animate.css that lets you animate text, but it only animated wholly, not letter by letter. With Testillate.js, you can easily animate your text the way you want. It provides animation effects such as flash, bounce, shake, swing, flip and more.

Read more→

10 Essential Books for Learning Responsive Web Design

by Durodola Ridwan | Wednesday, April 09, 2014 | |
With the ever-increasing need to view websites on mobile devices, websites have to be adaptable to different screen resolutions. Responsive web design seems like a tough egg to crack. You want to make sure your web work is fluid enough to keep up in the ever-changing digital age. You need a little help with the overall process from start to design to development. Today post features 10 Best Books for Learning Responsive Web Design. Enjoy!



Responsive Web Design

This is a must-read responsive web design book. It’s written by Ethan Marcotte, a popular designer who conceptualized the idea of responsive web design. With this book, you will learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users' needs. Ethan Marcotte explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) is their display.



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