CSS - Cascading Style Sheets

jQuery 3D CSS card flipping effect – Transform 3D

Do you play the cards game classic Solitaire? I know this is most favorite microsoft's game. Here, I am not going to discuss about this game nor it's trick. I am fan of it's 3D card flipping effect and so, here sharing how can we do this with css and jquery. For creating this 3D Card flipping effect, I have done some experimental work with CSS3 Transform (3D) rule. The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. I had used many transform (3D) effects in Demo. In this…
Continue Reading »
CSS - Cascading Style Sheets

Create a flashing button with CSS3 @keyframes Animation

Often, we need a promotional or highlight button like "Hot Offers/Deals/Promotional Discounts" with flashing effects. Today, we will create a beautiful flashing button without any GIF image using Pure CSS3. Before this, I am going to remind the basic ruls of CSS3 Animation first. CSS3 animations allows animation of most HTML elements without using JavaScript or Flash! To use CSS3 animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. The basic of @keyframes Rule When you specify CSS styles inside the @keyframes rule, the animation will gradually change from…
Continue Reading »
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 the loader. The animated portion will be a translucent overlay, so you can easily change the colour and background properties if you chose to do so later on. I’ve used a gradient background but this can easily be swapped out for a solid colour or background image. ., .inner{ ;…
Continue Reading »
CSS - Cascading Style Sheets

CSS Custom Cursors

The cursor property specifies the type of cursor to be displayed when pointing on an element. Some CSS properties are animatable, meaning that they can be used in animations and transitions. Animatable properties can change gradually from one value to another, like size, numbers, percentage and color. Now, when you'd like to customize a cursor, and CSS lets you do it quite easily! Click here for a list of the cursor styles supported by the CSS W3C recommendations. Rollover on the above image and see the CSS custom Cursor   The CSS The cursor CSS property accepts a series of cursors, and using…
Continue Reading »
CSS - Cascading Style Sheets

Convert Color images to Grayscale, Sepia, Blur & more with CSS Filter

"Is there a simple way to display a color bitmap in gray-scale with just HTML/CSS?" - This was a question for most of web designer / developer. Meanwhile for achieving this effect, they were using JavaScript Library like or two different images.  After the end of Flash for website development, Adobe and others have been hard at work bringing this amazing technology to CSS. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. With advancements in the standards of…
Continue Reading »
CSS - Cascading Style Sheets

Animated aquarium with pure CSS

Here is a pure CSS experimental work to create a aquarium. Image / javascript hasn't been used for aquarium or it's animation. I have used jQuery only for random air-bubbles. All these animation is created by Pure CSS. Some times ago, I had written a article about "Animated bubbles upwards continuously with pure CSS". You can also use this trick for air-bubbles. For Creating Aquarium's water, sand, rocks and plants few lines of HTML required. The HTML <div class="bubbles"></div> <div class="ground"></div> <div class="rock_1"></div> <div class="rock_2"></div> <div class="rock_3"></div> <div class="rock_4"></div> <div class="rock_5"></div> <div class="rock_6"></div> <div class="rock_7"></div> <div class="plant_1_wrap"> <div class="plant_1"></div> <div…
Continue Reading »
CSS - Cascading Style Sheets

Creating a CSS Game – Tic-Tac-Toe

One year ago, I had posted a puzzle game called “Doraemon Puzzle”. It was developed with the help of most powerful JavaScript library jQuery. Now, I have developed a game using CSS only. Have you remembered a favorite game which we always played in school/collage days? Yes this is "Tic-Tac-Toe". My version works as any normal Tic-tac-toe game would: 2 players can play against each other, it can result in either a win or a tie. Players can also restart the game. HTML <div class="tic-tac-toe"> <input id="block1-1-1" type="radio" class="player-1 left first-column top first-row first-diagonal turn-1"/> <label for="block1-1-1" class="turn-1"></label> <input id="block1-1-2" type="radio"…
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 markup and CSS. The HTML <div id="beaker"> <span class="bubble"> <span class="glow"> </span> </span> </div> With our bubbles all made, now we need them to act like bubbles. We could use JavaScript but that's no fun. Just use CSS! There are a few things we need to animate. The vertical positioning…
Continue Reading »
CSS - Cascading Style Sheets

Change an input’s HTML5 placeholder color with CSS

Today, We will play with some more interesting CSS style properties for HTML5 INPUT placeholder styling. Let's explore, how to style placeholder text within INPUT elements with some unique CSS code. In previous articles, we have already covered some beautiful CSS effects on INPUT and Input . What is Placeholder? The placeholder attribute specifies a short hint that describes the expected value of an input field ( a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value. The placeholder attribute works with the following input types: text, search, url, tel, email,…
Continue Reading »
CSS - Cascading Style Sheets

Analog clock using css3 and jquery

Hi guys! Today we are going to see another great example of analog clock using the power of CSS3 and most advanced library jQuery. We will start by creating a very cool and realistic analog wall clock with pure CSS3 properties, and add a little smooth rotation for giving the clock hands a rotating effect. The HTML Html part is very simple. <div id="clock"> <div id="hour" style="transform: rotate();"><img src=""></div> <div id="minute" style="transform: rotate(54deg);"><img src=""></div> <div id="second" style="transform: rotate(108deg);"><img src=""></div> </div> The CSS Now, It's time to play with some cool css3 properties like transition, transform and css easing. #clock { background-image: url(""); height: 200px;…
Continue Reading »