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.
read more @ http://www.css-jquery-design.com/…

Animated aquarium with pure CSS

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 class="plant_2"></div>
    <div class="plant_3"></div>
</div>
<div class="plant_2_wrap">
    <div class="plant_4"></div>
    <div class="plant_5"></div>
</div>

Now, its CSS turn. I had written about 1040 lines only in CSS for creating these elements.
read more @ http://www.css-jquery-design.com/…read-more-button

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. read more @ http://www.css-jquery-design.com/…

Animated bubbles upwards continuously with pure 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! read more @ http://www.css-jquery-design.com/…read-more-button

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. I.e. 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 want the image to be “indexed” by Google and Facebook. If the answer is yes to all or any of these questions, then usually the image is “content” and you should use an IMG tag.

If you want a different image to display at different screen sizes (or no image at all on certain devices), or if you’re happy for the image to not appear on a print out, or you’re happy for the image to not appear if CSS is turned off, then usually the image is “design” and you should use a background image.

Note: If an HTML file contains ten images – eleven files are required to display the page right. Loading images takes time, so my best advice is: Use images carefully.

Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
read more @ http://www.css-jquery-design.com/…

read-more-button

Proper uses of IMG & Background-image

  1. Use IMG if you intend to have people print your page and you want the image to be included by default. 
  2. Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.

read-more-button

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 [type=button] and Input [type=text].
read more @ http://www.css-jquery-design.com/…

What is Placeholder?

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. 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, and password.  The placeholder attribute is new in HTML5 read more @ http://www.css-jquery-design.com/…

Change input HTML5 placeholder color with CSS
There are three different ways of implementations: pseudo-elements, pseudo-classes, and nothing read more @ http://www.css-jquery-design.com/…
read-more-button

Hi friends, today we are going to see a cool example of animated 3D Background using HTML5 <canvas> and javascript. The <canvas> element is part of HTML5 and allows for dynamic, script-able rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph. The <canvas> element is only a container for graphics… read more @ http://www.css-jquery-design.com/…

Animated 3D Perspective Background Patterns using HTML5 Canvas

What is canvas element in HTML?

Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component in 2004 read more @ http://www.css-jquery-design.com/…

read-more-button

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 handles a rotating effect. read more @ http://www.css-jquery-design.com/…

analog clock using css jquery javascript

BROWSER COMPATIBILITY:

As we mentioned before, this technology is developed with jQuery so it is supported by almost all major browsers. it is possible that the syntax and behavior can be changed in future versions of browsers. For today, it is supported by next browsers: read more @ http://www.css-jquery-design.com/…

  • Chrome 15+
  • Firefox 9+
  • Safari 4+
  • IE9+
  • Opera 12+

read-more-button

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 hasn’t been finalized. read more @ http://www.css-jquery-design.com/…

CSS-Vendor-Prefixes-or-CSS3-browser-prefixes

The CSS browser prefixes are:

  • Android: -webkit-
  • Chrome: -webkit-
  • Firefox: -moz-
  • Internet Explorer: -ms-
  • iOS: -webkit-
  • Opera: -o-
  • Safari: -webkit-

In most cases, to use a more advanced CSS style property, you take the standard CSS property and add the prefix above for each browser. read more @ http://www.css-jquery-design.com/…
read-more-button