CSS - Cascading Style Sheets

HTML5 Full-screen Video Page Background

Nowadays user interface and experience are more important now than ever. If you're building a digital identity, whether it be for a website or application, "look and feel" play an extremely important part. Today, I'm going to show you how to use native HTML5 video, and implement it in the background of your site. All without using a plugin or Flash. We'll take a look at some of the native video controls too, to make sure that a user's experience is fully enhanced. Browser Compatibility: As we mentioned before, this technology is developed in HTML5, so it is supported by…
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

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

Html IMG vs CSS Background-image

Image - Useful Tips An image can be used in a webpage for two regions, 1) Image =  for content use, on the other hand, tend to change frequently. New images are uploaded often, users change their profile images and photo galleries, etc. 2) Background Image = for design.  logos, button images, links with images, etc. tend to stay the same. They're only changed if designer want to redesign. The way I tend to think about this is, do I want the image to appear on all screen sizes, on all devices, with CSS turned either on or off? Do I…
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 make something clear, Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property. Chrome and Safari requires the prefix -webkit- in css. Important: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property. The HTML <div id="colorWheel"> <span class="color01"></span> <span class="color02"></span> <span…
Continue Reading »
CSS - Cascading Style Sheets

CSS3 Buttons with Cool Effects – Pure CSS

Nowadays, using subtle patterns is kinda cool so I thought why not using them also on buttons? The idea was to create some nice CSS3 patterned buttons and in this article you'll see what I've been working on lately. I wrote before about CSS3 buttons, so you may want to check also these articles: CSS3 Transitions Effects on Background Gradients Create Icons in CSS Without Image Hover and Click Trigger For CIRCULAR Elements With jQuery CSS3 patterned buttons features Easy-to-use. Contain the transitions on gradients hack. As you may have expected, no images used here. Instead, an base64 string is used to…
Continue Reading »
CSS - Cascading Style Sheets

Hover and Click Trigger For CIRCULAR Elements With jQuery

Today we want to share one possible solution to the circle hovering problem. We'll create a plugin that will take care of the 'mouseenter', 'mouseleave' and 'click' events to be triggered only on the circular shape of the element and not its bounding box. Applying a :hover pseudo-class to an element is widely known as the classic "hovering" over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This…
Continue Reading »
CSS - Cascading Style Sheets

Animated 3D Bouncing Ball with CSS3, Html5

Hi guys! Today we are going to see another great example of how to use the power of CSS3. We will start by creating a very cool and realistic 3D ball with pure CSS3 properties, and add a little CSS3 animations for giving the ball a "bouncing" effect. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties (gradient, shadow, border-radius, keyframe animation). THE HTML Let's start with some very basic HTML: <div id="ballWrapper">      <div id="ball"></div>      <div id="ballShadow"></div> </div> What we have here are 3 simple DIV elements. "#ballWrapper"…
Continue Reading »
CSS - Cascading Style Sheets

CSS3 Transitions Effects on Background Gradients

CSS transitions do not have any effect on background gradients. As far as I know, the thing is that something similar would be quite difficult to achieve considering the multitude of possible gradients that can be created using a color palette. Though, there are some simple ways you can simulate smooth transitions on gradients and below you'll see how to do that. Before writing this article, I was thinking this new article will hopefully be more useful to you as It contains one more extra technique that can help you faking transitions on background gradients. So, what is this about…
Continue Reading »