CSS
< Coding
< Web Development
Get flash to fully experience Pearltrees
CSS: Specificity Wars Join me, and together we can rule the galaxy as father and geeks! A few weeks back in Cupertino, I saw Aaron explain how the specificity of CSS selectors is calculated in a way which I hadn't seen before. Then today I came across a knotty problem while building XHTML and CSS templates for a new project where two selectors behaved differently to how I expected and I realised that I had not completed my training.
Apart from Floats , the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works . In most cases such problems are caused by the simple fact that somewhere among your CSS-rules you’ve defined a more specific selector.
22 Beautiful CSS/HTML Login Form Templates In this article we have collection some creative login forms using modern design with CSS3 and HTML5. In fact, nowadays, popular web service, web read more
1. Hover Slide Effect with jQuery Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images.
This is the first part of a series of articles that will discuss a particular CSS best practice or tip. I’ll be covering a mixture of topics that deals with CSS best practices, performance optimization, and tips and tricks to improve your workflow. Today we’ll be covering the topic of resetting your styles. Resetting your styles, commonly referred to as CSS Reset or Reset CSS is the process of resetting (or more accurately – setting ) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings.
First things first: This tutorial is an updated version of my original style sheet tutorial. Style Sheets, A.K.A.: Cascading Style Sheets, A.K.A.: CSS, are becoming more popular now that they are cross-browser models thanks to Netscape's version 4.x including the commands. This is a general overview of Style Sheets.
CSS3 Chat Bubbles Monday, December 20, 2010 { 13 Comments } Few day ago I saw on Hacker News the link Creating Triangles in CSS from Jon Rohan(kudos to JON) and was specially interesting for the chat bubbles. Mainly because I was building one mini app for Twitter who should run on iPhone/iPad (webkit browser) so I needed simple solution for the chat bubbles. Jon uses this HTML : <div class="chat-bubble"> Buongiorno! <div class="chat-bubble-arrow-border"></div> <div class="chat-bubble-arrow"></div> </div>
This is a basic test page. You can read the article here . First we'll set up our navigation list. I have chosen 4 sections for ease, and its best if navigation sections are kept short anyway: <ul id="navlist"><li><a href="index.html" >Home</a></li><li><a href="products.html">Products</a></li><li><a href="faq.html">FAQ</a></li><li><a href="contact.html">contact us</a></li></ul> Next we need to add a unique class or id (doesn't really matter which) to each of the section pages: