Posts Tagged ‘CSS3’
CSS3 Font Face
Posted on: July 8, 2011
- In: CSS3
- Leave a Comment
What is @font-face
Generally, we’ve been limited to using the fonts pre-installed on MS Windows, Mac and Linux OSs. But now CSS3 has brought an end to it. Increasing support of the CSS3 @font-face allows us to load a font onto our servers, link to and name that font in our CSS, with the font-face we can use any font that designers uses it into their designs.
How to use @font-face
The syntax for the @font-face implemenation is:
@font-face {
font-family: Name Of The Font;
src: source where the font is stored;
}
Browsers that support @font-face
1. Firefox : 3.6+
2. Safari : 3.2+
3. Chrome : 10+
4. Opera : 11+
5. Internet Explorer : 9+ and partial support in 7 & 8 versions.
6. Android Browsers : 2.1+ partial support
Note: Partial support before IE9 refers to only supporting EOT fonts. Safari for iOS 4.1 and below only supports SVG fonts.
The main issue with @font-face is the ownership of the fonts. Make sure you are legally allowed to upload and share a font before using @font-face, as when you embed a font, that is what you are doing: sharing a file. Just like music, for most fonts it is illegal to upload and share without proper attribution and/or payment.
Rounded corner using CSS
Posted on: April 2, 2009
We have seen most of us use images to work on the rounded corner, but here is some procedure where we can make rounded corners using CSS3. But this works only on mozilla, IE sucks.
Example:
<html>
<head>
<style type=”text/css”>
.text{
-moz-border-radius-bottomleft:10px; // for Mozilla Firefox
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-radius: 10px; //For Safari
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #AAAAAA;
color:#333333;
font-size:1.5em;
height:19px;
line-height:1;
padding:2px 5px;
width:286px;
}
</style>
</head>
<body>
<div>
<input type=”text” name=”name” size=”50″ class=”text” />
</div>
</body>
</html>
What is CSS?
Posted on: December 23, 2008
- In: CSS3
- Leave a Comment
Cascading Style Sheets (CSS) are the modern standard for website presentation. Cascading Style Sheets, commonly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.
When combined with structural markup language like HTML, XHTML, or XML, CSS provide browsers with the information that enables them to present all the visual aspects and elements of a web document. CSS controls the presentational aspects of a web page’s design, whereas HTML, XHTML, or XML control the structure of a webpage.
With CSS and XHTML you can reduce the cost of building and maintaining a website when compared to HTML pages only. Also you can reduce the hard disk space required and the bandwidth, which can benefit webmaster and web visitor.
Mywebdunia's Blog 