CSS3
Hyphenation is usually needed when the width of the page or column is too narrow to accommodate the line. It allows paragraphs to align with proper spacing, and could also minimize the rivers from appearing, a result of breaking words apart. To compare, let’s take a look at the following screenshot, note the spacing between the words. We have been able to hyphenate paragraph in print media for so long but it was only recently that we are able to hyphenate paragraphs using a new CSS3 property called hyphens , albeit with lack of support from the browsers. At the time of the writing, this new property, hyphens , is only supported in Internet Explorer 10, Firefox 6+, Safari 5.1+ with the prefix — surprisingly it has not yet been implemented in Chrome. View Demo
Better Paragraphs with CSS3 Hyphenation
A simple parallax content slider with different animations for each slider element and a background parallax effect. View demo Download source Today we want to share a simple parallax content slider with you. Using CSS animations, we’ll control the animation of each single element in the slider and create a parallax effect by animating the background of the slider itself. The idea for this comes from the slider of the Kendo UI homepage, a framework for modern HTML UI. After we got some requests and questions about how to do something like that, we decided to recreate the effect.
Parallax Content Slider with CSS3 and jQuery
How to create animated tooltips with CSS3
How to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after View demo Download source In today’s tip we’ll show you how to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after. The idea is to have a list with links or in our case, social icons, that reveal a little tooltip on hover. The unordered list will look like this:CSS3 breadcrumbs
A breadcrumb navigation allow users to know where they are in a hierarchical structure and navigate back to higher-level pages in the hierarchy. Also, the breadcrumbs can reduce the number of actions a user need to perform in order to navigate back. So, to keep it simple, if you have a website with lot of pages and sub-levels, in order to increase usability , you need to use breadcrumbs. Having said that, today you’ll learn how to create your own cool CSS3 breadcrumbs. View demo The HTML
Ultimate CSS Gradient Generator - ColorZilla.com
background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
var $list = $( '#pe-thumbs' ), listW = $list.width(), listL = $list.offset().left,
Thumbnail Proximity Effect with jQuery and CSS3