Tag archives for CSS properties

CSS - Cascading Style Sheets

CSS3 background gradient animation in a progress bar like in Windows 7

You can create a responsive, animated progress bars like in Windows 7 using pure CSS3. I haven't used any image in this tutorial. Resize your browser window to see the responsiveness. HTML <div class="bar"> <div class="blue loader"> <h3>;/h3> <span class="inner"> </span> </div> </div> CSS Next, we’ll create the background for…
Continue Reading
CSS - Cascading Style Sheets

Animated bubbles upwards continuously with pure CSS

Here is a pure CSS experimental work to create floating bubbles without using JavaScript. These animated bubbles are also with popping effect. All these animation is created by Pure CSS. For our little demo, we use a simple image for the conical flask and then create the bubbles entirely with…
Continue Reading
CSS - Cascading Style Sheets

CSS Vendor Prefixes or CSS3 browser prefixes

CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that…
Continue Reading
CSS - Cascading Style Sheets

CSS3 Inheritance Tips and Tricks – inherit, initial & unset

It’s easy to overlook the cascading features of style-sheets. Most designers/developers are aware of the inherit keyword but there are a few new inheritance features in CSS3 you may not be aware of… property: inherit; The inherit keyword means “use whatever value is assigned to my parent”. If no value was explicitly defined on the parent element,…
Continue Reading
CSS - Cascading Style Sheets

Animated Color wheel spinning with CSS3 Keyframes animation, Transform and Transition

I have done some experimental work to create CSS3 Animation without using JavaScript. I end up creating some animations using CSS3 Keyframes and Transform and like to share. I have done this animation using border-color tricks and CSS Transform: CSS scale and CSS3 rotation. Note: Before going I like to…
Continue Reading
CSS - Cascading Style Sheets

Cool inset Text Effect with CSS3 Text-Shadow

So, I have seen a few tutorials online about using text-shadow to create a basic inset text effect, but they are all lacking the real design aspect that makes the type look like it is actually INSET. That aspect is the inner shadow. Introduction I played around with trying to hack box-shadow into background-image in the…
Continue Reading
CSS - Cascading Style Sheets

Rotating Words With CSS Animations – CSS3 Keyframes Animation Example

In today's tutorial we'll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We'll be "exchanging" certain words of that sentence using CSS animations. Please note: the result of this tutorial will only work as intended in browsers that…
Continue Reading
12