Archive for the ‘Css- help’ Category

CSS3 Colors and Alpha Channel Transparency

Monday, November 29th, 2010

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.

Parent Selectors in CSS

Friday, October 22nd, 2010

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.

Read More

Pure CSS Drop-Down Menus

Friday, October 15th, 2010

Pure CSS Menu are lightweight – just a few kb in size, work on almost every known browser (Internet Explorer, Firefox, Opera, Safari, Mozilla, Chrome, Netscape Navigator, etc) – even those that have JavaScript turned off and one of the things I like the most: CSS menus are search-engine friendly!also by Using Pure CSS Menu you can create CSS dropdown menus online for free without even having to know a single bit of CSS or HTML.

Read More

Create Complex CSS With EZ-CSS

Friday, October 1st, 2010

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

Read More

CSS web pages fast

Wednesday, September 1st, 2010

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.

CSS Image Map

Friday, August 27th, 2010

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.

Read More

CSS3 Rounded Corners

Monday, August 2nd, 2010

CSS 3 finally delivers specifications for the rounding of corners. CSS 3 allows you to specify a radius for the corners of an element. This offers the promise of no longer having to use awkward rounded corner / border hacks based on images or CSS / JavaScript for such a simple graphic effect.

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.

This box will have rounded corners in Safari/Chrome and Mozilla Firefox, Camino etc.

Yet IE will not show any sign of radius applied to it’s corners untill CSS 3 support is added. Hopefully IE9 will do better.

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:

.cornered{
border:2px solid #999; padding:0.5em;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

Image Rollover Borders That Do Not Change Layout

Monday, July 12th, 2010

Image Rollover Borders

Readmore

Lighbox effect with CSS – No Javascript needed

Monday, July 12th, 2010

Readmore

Liquid CSS Layouts

Tuesday, June 22nd, 2010

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.