Archive for the ‘ CSS3 ’ Category

25 Rounded Corners Techniques with CSS

25 Rounded Corners Techniques with CSSRounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. Actually, there are a lot of methods and techniques to create rounded [ READ MORE ]

Dolphin CSS Menu

Dolphin CSS Menu#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}#dolphinnav ul li{display:block;float:left;margin:0 1px;}#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}#dolphinnav ul li a:hover{color:#fff;background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_bg-OVER.gif) repeat-x bottom left;}#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 [ READ MORE ]

Time 4 Bed CSS Menu

Time 4 Bed CSS Menu#time4bed-nav{position:relative;height:43px;font-size:14px;text-transform:uppercase;background:#fff url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/time4bed_bg.gif") repeat-x bottom left;font-family:Georgia, "Times New Roman", Times, serif;}#time4bed-nav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}#time4bed-nav ul li{display:block;float:left;margin:0 2px;}#time4bed-nav ul li a{display:block;float:left;color:#ffdab6;text-decoration:none;padding:0 0 0 25px;height:43px;line-height:50px;}#time4bed-nav ul li a span{display:block;float:left;padding:0 25px 0 0;height:31px;width:auto;}#time4bed-nav ul li a:hover{color:#fff;}#time4bed-nav ul li a:hover span{display:block;cursor:pointer;}#time4bed-nav ul li a.current,#time4bed-nav ul li a.current:hover{color:#894d12;background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/time2bed_left-ON.gif") no-repeat top left;}#time4bed-nav ul li a.current span{background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/time2bed_right-ON.gif") no-repeat top [ READ MORE ]

Matte CSS Menu

Matte CSS Menu#menu { font-family: Arial, sans-serif; font-weight: bold; text-transform: uppercase; margin: 50px 0; padding: 0; list-style-type: none; background-color: #eee; font-size: 13px; height: 40px; border-top: 2px solid #eee; border-bottom: 2px solid #ccc;}#menu li { float: left; margin: 0; }#menu li a { text-decoration: none; display: block; padding: 0 20px; line-height: 40px; color: #666;}#menu li a:hover, #menu li.active a { background-color: #f5f5f5; border-bottom: 2px solid #DDD; color: #999;}#menu_wrapper ul {margin-left: 12px;}#menu_wrapper {padding: 0 16px 0 0; background: url(grey.png) [ READ MORE ]

Fox CSS Menu

Fox CSS Menu#foxmenucontainer{height:24px;background:#000;display:block;padding:45px 0 0 15px;}#foxmenu{position:relative;display:block;height:24px;font-size:11px;font-weight:bold;font-family:Arial,Verdana,Helvitica,sans-serif;}#foxmenu ul{margin:0px;padding:0;list-style-type:none;width:auto;}#foxmenu ul li{display:block;float:left;margin:0 1px 0 0;}#foxmenu ul li a{display:block;float:left;color:#fff;text-decoration:none;padding:5px 20px 0 20px;height:19px;background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/foxmenu_bg-OFF.gif) no-repeat top left;}#foxmenu ul li a:hover{color:#fff;background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/foxmenu_bg-OVER.gif) no-repeat top right;}#foxmenu ul li a.current,#foxmenu ul li a.current:hover{color:#000;background:#fff;} Fox CSS Menu This menu is called “Fox” it’s crafty, bold and colorful. A great menu for use on dark sites, as it [ READ MORE ]

An enlarging unordered list

An enlarging unordered list#easel {width:75px; height:100px; margin:3em auto;}#painters { padding:0; margin:0; list-style-type:none; }#painters li { width:75px; height:20px; float:left; border:1px solid #000; margin-right:2px; }#painters a em { font-style:normal; font-size:1em; line-height:1.5em; }#painters a { text-decoration:none; color:#000; [ READ MORE ]

Horizontal sliding menu

Horizontal sliding menu#menu { margin:0; padding:0; width:45em; height:8.5em; overflow:hidden; background:#000; }#menu li { display:inline; list-style-type:none; }#menu li a { display:block; float:left; text-decoration:none; margin:0; }#menu li a img { opacity:0.7; margin:0.5em; border:0; [ READ MORE ]

50+ Stunning CSS3 Articles, Cheat Sheets and Tutorials Collections

  • October 4th, 2009
  • Posted in CSS3 . HTML

50+ Stunning CSS3 Articles, Cheat Sheets and Tutorials CollectionsCSS3 is introducing loads of new and exciting functions and features like text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image. It is expected that CSS3, once it is fully developed and supported, will leads to greater flexibility and make it simpler to create complex and dynamic visual effects. [ READ MORE ]

20 Very Useful CSS3 Tutorials

  • October 4th, 2009
  • Posted in CSS3 . HTML

20 Very Useful CSS3 Tutorials20 Very Useful CSS3 Tutorials 1.Rounded Corner Boxes the CSS3 Way 2.Attribute Selection in CSS3 3.CSS3 Transparency: The Opacity Property (from manadarindesign.com) 3.Liquid faux columns with background-size the CSS3 way 4.Introducing the CSS3 Multi-Column Module 5.CSS3 Opacity (from exforsys.com) 6.CSS3 Text-Wrapping 7.CSS3 Color Names (this is certainly worth a bookmark). 8.Using CSS 3 selectors to apply link icons 9.CSS text shadows [ READ MORE ]

12 Really Useful CSS3 Tips And Techniques

  • October 4th, 2009
  • Posted in CSS3 . HTML

12 Really Useful CSS3 Tips And TechniquesCSS 3 no doubt is amazing. I have been using slight bits of it in some of my other web projects, and i am more than pleased with it. Its simplicity runs so well with its advanced features such as rounded corner rendering and font file reading. Rounded up [ READ MORE ]

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

  • October 4th, 2009
  • Posted in CSS3 . HTML

HTML 5 and CSS 3: The Techniques You’ll Soon Be UsingIn this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you [ READ MORE ]

CSS3

  • October 4th, 2009
  • Posted in CSS3 . HTML

CSS3Cascading Style Sheets (CSS) is a style sheet format, endorsed by the World Wide Web Consortium (W3C) that works with HTML documents using simple syntax and various style properties denoted by English language keywords. CSS1 (Version 1.0) incorporated innumerable layout settings suitable for downloadable HTML pages. CSS2 (Version 2.0) provides additional XML support, downloadable fonts [ READ MORE ]

CSS3 opecity example

  • October 2nd, 2009
  • Posted in CSS3

CSS3 opecity exampleCSS 3 Opacity Example This paragraph has opacity 1.0. background-color:#30f;color:#fff;width:100%;opacity:1.0; This paragraph has opacity 0.8. background-color:#30f;color:#fff;width:100%;opacity:0.8; This paragraph has opacity 0.5. background-color:#30f;color:#fff;width:100%;opacity:0.5; This paragraph has opacity 0.2. background-color:#30f;color:#fff;width:100%;opacity:0.2; Return to Opacity Article zSB(3,3) Get Opacity to Work in Internet Explorer This paragraph has opacity 1.0. background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=100); This paragraph has opacity 0.8. background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=80); This paragraph has opacity 0.5. background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=50); This paragraph has opacity 0.2. background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=20); Return to Opacity Article Some [ READ MORE ]

CSS 3 Opacity

  • October 2nd, 2009
  • Posted in CSS3

CSS 3 OpacityOne of the things that you can easily do in print design but not on the Web is overlay text on an image or colored background, and change the transparency of that image so that the text fades into the background. But there is a property in CSS 3 that will allow you [ READ MORE ]

Use a Highlighter on this page