CSS - Cascading Style Sheets

Disable mouse scroll / wheel Zoom on embedded iframe Google Maps

Web Designer / Developer usually embed Google Maps using iFrame in most websites. But, page scrolling stuck when user use mouse scroll in Google map area, and now it is working as Map zoom in/out. So, we always wonder that, "is there a way to disable the zoom via mouse scroll wheel on all of them using css or JavaScript?" Answer is "Yes", and here is powerful CSS's property - POINTER-EVENTS. For this, I am wrapping the Google map's iframe in a DIV. Default behavior of mouse in this DIV has been fixed to "pointer-events: none". It will terminate the zoom-in…
Continue Reading »
HTML

Disable landscape orientation for mobile users in responsive website

Sometimes, a responsive website looks great on Portrait orientation, but messed up on Landscape. So, a UI Developer wish to disable Landscape orientation for mobile devices (Android & iOS) before getting the website live. Before Viewport meta tag, this is always a challenge to UI Developer to show the website in correct Zoom and also doesn't allow user to Scale the website's content. But nowadays it can be easily fix with viewport. For this viewport meta tag trick please read this article. But you can't disable toggling of landscape/portrait on a mobile web app (Android Browser/iOS-Mobile Safari) through viewport meta…
Continue Reading »
CSS - Cascading Style Sheets

Pure CSS Water Ripple Effect and Animated Bubbles

I am sharing another example of pure CSS experimental work to create animated bubbles in water with wave or ripple effects without using any image or JavaScript. These animated bubbles are also with popping effect. All these Lab elements are created and animated by Pure CSS. Previously, I had shared "Animated bubbles upwards continuously with pure CSS" with same concept. At that time, I had used a simple image for the conical flask with half filled liquid. But, in this tutorial I have created all these elements by CSS. If you were a Chemistry student or visited any Chemical lab than, you can easily identify…
Continue Reading »
HTML

Updating address bar with new URL without hash or reloading the page

Just to make it easier to understand the article, this is what Facebook does when you open a photo, for example. The url bar changes to point DIRECTLY to that photo, so you can share the URL without losing where you are in the site. Remember sites based on framing last decade? You could only get the homepage url, because only internal frames were changing. And that was terrible. How to Update Address Bar with New URL without reloading the webpage? Is there any way, I can modify the URL of the current page without reloading the page? I would…
Continue Reading »
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

Pure CSS Heart Beat / Pulsing Animation

Before working on Heart pulsing animation, first We have to think about How does the Heart beat? It expands and Each pulsing is in same duration/period of time. This can be easily done with CSS3 animation. No flash or images are required. A heart does not double in size when it beats. 10% change in size looks better to me. I like it getting both larger and smaller When it stops moving altogether it looks dead to me. Even when it isn't beating. So, it needs to expand or contract a little to look alive :). I explicitly have the heart start…
Continue Reading »
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

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 »