Home » Archive

Articles in the CSS3 Category

CSS3, Design, HTML5, jQuery »

[10 Apr 2013 | No Comment | ]

Mobile & Tablet Emulator is an useful online tool to check the screen resolution on different mobile and tablet devices.
Do you check your mobile website screen resolution on multiple devices straight from your desktop. It is now possible with this mobile emulator.
Launch >> Mobile & Tablet Emulator
Below web app screenshot and some the devices in which you can check your screen resolution.
Mobile Emulator Web app screenshots:
Screenshot1

Screenshot2

Screenshot3

Mobile devices supported:

BlackBerry: 320×240
iphone4s: 320×480
iphone5: 320×568
Galaxy S3: 360×640
Lumia 900: 480×800

Tablet devices supported:

Kindle Fire 7: 533×853
Google Nexus: 603×966
Apple iPad: 768×1024

Download directly from Google webstore. Best …

CSS3, Design, HTML5 »

[3 Mar 2013 | No Comment | ]

Now we can create eye catching animation using CSS3 and HTML5, so to describe that feature. We have explained how to create ticking or rotating clock hand in middle of the circle using CSS3 animation.
In this simple article on creating CSS3 animation we have used two important CSS3 properties.

animation
@keyframes

Note that we have to add prefix of -webkit-, -moz-, -ms-, -o-, infront of animation and keyframes to work on respective browsers.

 
Simple HTML5 CSS3 Animation code:
Below is the sample code which creates the ticking hand animation over circular background. Code explanation is …

CSS, CSS3, Design, HTML5, Javascript »

[24 Feb 2013 | No Comment | ]

Simple javascript and html coded calculator does simple operations like Addition, Subtraction, division and multiplication.
The code is free to use or modify.
I am distributing to code to be useful for beginners.

Simple Calculator (html, css, javascript)
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
</head>
<style>
#wrapper
{
width:250px;
height:330px;
background:#333;
position:absolute;
}
#container{
width:95%;
height:95%;
position:relative;
left:5px;
top:7px;
border:1px solid #666;
background:#666;
}
.inputClass
{
padding:10px 0px;
margin:4px 0px 0px 4px;
text-align:right;
font-size:14px;
font-weight:600;
}
.numericBTN{
width:52px;
height:30px;
margin:20px 0px 0px 4px;
}

.controlBTN
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
color: #000;
background: -moz-linear-gradient(
top,
#f5c7d7 0%,
#ff5c5c);
background: -webkit-gradient(
linear, left top, left bottom,
from(#f5c7d7),
to(#ff5c5c));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #ff5c5c;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px …

CSS3, Design, Mobile Technology »

[28 Jan 2013 | No Comment | ]

Top mobile websites designed for iPhone can be created using HTML, CSS, javascript combinations or with the help of media queries to load different style according to the device width will also supports in iphone.
We can either use media queries to create mobile websites or design different domain mobile website and redirect to subdomain.
iPhone Websites
Here we have showcased some of top mobile websites 2013 created for iphone or any mobile browser. So the idea of showcasing the iphone websites is for referencing before we create our mobile website.
article source: mobile …

CSS, CSS3, Design, HTML5 »

[18 Jan 2013 | No Comment | ]

To create layout which scales across multiple devices, We dont always use the same content or images across the smaller screen size devices.
It is wise to use minimal content in small screen devices. So while creating responsive design!! means loading different stylesheet pages or applying different styles for the content. We want remove some containers from the layout inside media queries CSS.

HTML5 Tutorials
CSS3 Tutorials

 

Problem:
How to remove some of the text or image content from HTML page on small screen devices while using media queries?, But which is better way to …