Archives for Mobile Web Technology - Page 2
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.…
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…
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.…
2015 in review
The stats helper monkeys prepared a 2015 annual report for this website (). Here’s an excerpt: The Louvre Museum has million visitors per year. This blog was viewed about 120,000times in 2015. If it were an exhibit at the Louvre Museum, it would take about 5 days for that…
Preview an image / thumbnail before it is uploaded – Html5 FileReader()
It is very easy to preview an image or thumbnail on client side before uploading on the server in jQuery and HTML 5 FileReader() . Suppose you have an application where user uploads bulk photo and then the users want to upload only some selected photo, in this case, we as a…
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…
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…
JQuery or JavaScript tricks for mobile devices like – Android, Windows, BlackBerry, Apple, iphone, ipad
JavaScript support is very good on modern mobile browsers. The mobile version of Firefox and Chrome provide pretty much desktop-level support for HTML5(CSS 3 + JavaScript + HTML 5 ) features. Most mobile phones are running some version of WebKit (what Chrome runs on), so you're pretty much guaranteed better…
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…
2014 in review
The stats helper monkeys prepared a 2014 annual report for this website (). Here’s an excerpt: The Louvre Museum has million visitors per year. This blog was viewed about 150,000 times in 2014. If it were an exhibit at the Louvre Museum, it would take about 6 days for that…