These new CSS3 features allow developers to create semi-transparent elements directly in the markup and CSS, without the need for extra images. The opacity property lets developers easily add different levels of transparency to virtually any element. Unfortunately, this property does not resolve every real-world transparency issue, because setting an opacity value on any single element will also set the same level of opacity on that element’s children, with no easy way to reverse the settings on the child elements.
Archive for the ‘Css- help’ Category
Let’s be clear here, just in case someone is finding this from a search engine: there are no parent selectors in CSS, not even in CSS3. It is an interesting topic to talk about though, and some fresh talk has surfaced.
EZ-CSS is a different kind of CSS framework. Authors are not bound to a “grid”. Plus, columns and gutters can be of any width. EZ-CSS works by forcing the final element in the HTML flow to become a block formatting context (we use “hasLayout” for Internet Explorer lt 8). If this makes no sense to you don’t worry, because using ez-css is an easy 4-step process
The webpage loading time is influenced by how much code you have inside the page. If you have less code, the site will load faster; search engines and the site visitors will love that.
When you build a table based webpage, you will have a big amount of table columns and table rows with all the visual information saved within the page: just for some text you have to create a table, row and column, then define alignment, width, background color, font tags, cell padding.
Sometimes browsers read the webpage’s tables twice before displaying the content. The first read will be to determine the table’s structure and the second read will be to determine the content and the CSS rules defined for that content.
In the days of table based web design, using image maps in your web layouts were quite common. They were used to define clickable areas, or “hotspots”, within several sliced images (coming together to form one image). During this time, these hotspots were used mostly for navigational purposes. Today, image maps created in CSS are not only a much leaner and cleaner markup, but they’re also easily editable and are often used for displaying additional content when hovered, not just as a means of navigation.
At the time of writing Internet Explorer’s latest version (8) still doesn’t support this feature in any way. Also CSS vendor prefixes are still necessary for Mozilla (FireFox) and WebKit (Safari/Chrome) based browsers. Surely the vendor-specific prefixes and syntactical quirks will also disappear once the application of this CSS3 feature becomes more commonplace.
The round corners in the example boxes above and below (that you’ll only see with browsers other than IE for now ) are achieved by the following simple CSS statements:
border:2px solid #999; padding:0.5em;
This article is a step by step case study showing you how to transform your table based web site to liquid CSS based layout. Although the site we’re applying the css layout to is a very specific case, throughout the tutorial we will provide various solutions to be applied to your particular case.
Before reading please be aware that in order to fully understand this article you need to:
* Have understanding of CSS (Cascading Style Sheets)
* Have understanding of HTML
* Be familiar to the liquid design concept
* Understand the necessity of cross-browser testing
* Have some basic knowledge of accessibility guidelines
* Have the patience to go through the code and tweak it until the result is satisfactory
Advantages of CSS liquid design over other types of layouts
* Decreases the HTML/body text ratio
* Is completely flexible
* Increases accessibility and usability of a site
* Works well on modern browsers and on some older browsers. Proves to be usable on text-only browsers.
* Looks as good if not better than table layouts once it’s ready. The misconception that css layouts aren’t as visually appealing as standard layouts has no argumentative base.
Drawbacks of the process
* Requires a lot of work, time and patience in order to make it compatible with older browsers and grasp all the details that make a liquid css layout perfect.
Key principles to CSS layouts
Style sheet layouts are based on the concept of absolute positioning. That means that every element is perceived as a unique entity that can be placed wherever on the page in relation to its edges. In this tutorial we will work with div boxes that act as holders for various elements.
The two most important things to remember are the margins one can set in relation to the edges of the page and the stack order of the div boxes.
The margins of can be set in such a way that a div box can be placed anywhere on the page. There is an illustration of the concept below. You can easily imagine how this box could be placed anywhere on the page. It is extremely useful because while visually they retain the position required by the design, in the source code, it can be placed anywhere.
The stack order of the div boxes allow overlapping or preventing it, if necessary, That way you can hide part of a div box and place something on top instead. Stack order translates to z-index number. Yes, it’s that CSS command that everyone finds difficult to understand at first contact with CSS. Below there is an illustration that shows exactly how z-index works.