Tag: css3 box shadow

CSS Custom Cursors

DhirajLeave a comment

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

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

CSS Custom Cursors 

Read full article @ http://www.css-jquery-design.com/…

read-more-button

Animated aquarium with pure CSS

DhirajLeave a comment

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

Animated bubbles upwards continuously with pure CSS

Dhiraj1 Comment

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

Change an input’s HTML5 placeholder color with CSS

DhirajLeave a comment

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

Analog clock using css3 and jquery

DhirajLeave a comment

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 CSS3 browser prefixes

DhirajLeave a comment

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

3D Parallax effect with CSS, javascript or jQuery

DhirajLeave a comment

Parallax effect is a long-known and widely used animation effect. Lately, the parallax effect has become a wide-spread and quite a trend element in web design, often referred to as “parallax scrolling”. Internet if full on many great examples of application of this effect in web design. As I planned to create a cool parallax animated background, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I’ll show you how I did it. In this tutorial, I’ll teach you the simplest parallax scrolling technique. Here, I am going to introduce you, a most flexible/responsive slider i.e. Parallaxfx_DG. It is so easy and useful. I have decided that I will post a page dedicated to this slider with it’s features and API later.
read more @ http://www.css-jquery-design.com/…

The idea of the parallax effect it in web design is built around giving a page depth by using several layers of images, all moving at different speeds in response to movement of the mouse or mouse scroller, so that a viewer get a full sense of 3D on the page. Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth. read more @ http://www.css-jquery-design.com/ …

parallax-effect-with-javascript-css3-jquery-beautiful-place-background

Javascript

I have created a JavaScript plugin for this parallax effect. Plugin writes HTML,  its attributes with CSS animation effect in background read more @ http://www.css-jquery-design.com/….
read-more-button

CSS Techniques – Absolute Horizontal And Vertical Centering In CSS

DhirajLeave a comment

We’ve all seen margin: 0 auto; for horizontal centering, but margin: auto;has refused to work for vertical centering… until now! But actually (spoiler alert!)

I’m not the pioneer of this method, and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of  read more @ http://www.css-jquery-design.com/…

centering div image both horizontally vertivally

1. Absolute Center

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

ADVANTAGES:

CSS3 Inheritance Tips and Tricks – inherit, initial & unset

Dhiraj1 Comment

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

css3-inheritance-tips-and-tricks-inherit-initial-unset

property: inherit;

The inherit keyword means “use whatever value is assigned to my parent”. If no value was explicitly defined on the parent element, the browser works up the DOM tree until the property is found. Ultimately, it ends at the browser  read more @ http://www.css-jquery-design.com/…
read-more-button

CSS3 Modal Window Popups – sliding forms with fancybox effect

DhirajLeave a comment

Today, I will describe you how to create cool CSS3 modal popup windows (or boxes). Literally, not so long ago, in order to achieve such effects, we used jQuery. But, as it turned out, CSS3 has all the necessary tools for making modal windows too. In our demonstration I have prepared single page with two popup elements: join form and login form. Welcome to test results (domo) and understand how it was made. read more @ http://www.css-jquery-design.com/…

css3-modal-window-popup

HTML

First, lets create the main HTML markup. As you can see – the structure is quite easy. Here are one panel with buttons and two popups. Each of them contains own overlay DIV element and popup DIV element with some content inside and ‘close’ button.  read more @ http://www.css-jquery-design.com/…

read-more-button