HTML/CSS Service

CSS Native Support of Fonts

Category: CSS, CSS Expert Ideas    |    1,041 views    |    Add a Comment  |   

 

The ability to embed fonts on a Web page has been a dream of many designers for years. @font-face is the CSS declaration that allows us to do this, but it is not widely supported by Web browsers, especially Internet Explorer. When CSS 2 first came out, the W3C actually recommended support for@font-face, but it was soon deprecated due to lack of support by CSS 2.1.

Now the demand has returned with a stronger push. Even though some current browsers don’t support it and older browser versions are still being used, most modern browsers do now support@font-face. If it is one day fully implemented, all we would have to do is this: Read more…

Share/Save/Bookmark

  • No Related Post

 

CSS Mathematical Functions

Category: CSS Expert Ideas    |    949 views    |    Add a Comment  |   

 

Most of us have come across a piece of CSS code for which we thought, “This would be much easier if I could just subtract X number of pixels,” or “This solution would be easier if I could just add X% onto this DIV.”

Without this simple math for CSS, most of us have found workarounds to many of these problems. But by implementing simple mathematical functions in CSS, we can eliminate extra code and make our thought process easier. Read more…

Share/Save/Bookmark

  • No Related Post

 

Smarter CSS Shortcuts

Category: CSS, CSS Expert Ideas    |    1,030 views    |    Add a Comment  |   

 

A much-wanted feature in future versions of CSS is to be able to use alternative and smarter shortcuts to shorten CSS code. Some of these are already being implemented in alternative CSS languages, but the new CSS 3 has no sign of this. With greater support, perhaps basic CSS could become smart enough to handle these shortcuts in another 10 or so years, when CSS 4 is introduced.

To see the benefit anyway, let’s look at a few examples in which smarter shortcuts would be beneficial.

When many elements from a certain class or ID share the same properties, things can get a bit repetitious:

  1. #navigation h1#navigation h2#navigation h3{  
  2.     font-familyVerdanaTahomasans-serif;  
  3.     letter-spacing-1px;  
  4. }  

Smarter syntax would tighten things up, saving both time and space in the style sheet:


  1. #navigation [h1,h2,h3]{  
  2.     font-familyVerdanaTahomasans-serif;  
  3.     letter-spacing-1px;  
  4. }  

As most of us know, styling links in CSS can be a huge hassle. Nesting these elements, as shown above, is a great solution, but a smarter syntax for dealing with pseudo-classes would also be good: Read more…

Share/Save/Bookmark

  • No Related Post

 

100 CSS Examples and Tutorials

Category: CSS, CSS Expert Ideas    |    1,349 views    |    3 Comments  |   
Top Exerpimental CSS Examples and Demo’s. here you can find samples and Examples. That’s a real power of CSS.

Navigation

Perfect pagination style using CSS- This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages.

 


   

Styling Lists

The Amazing <li>- With a little CSS, the <li> becomes one of the most powerful and versatile tags in a web designer’s arsenal. This article is a tutorial and a tribute to the amazing <li>.


 


So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series.  

Better Ordered Lists (Using Simple PHP and CSS)- Here is an example where you ditch the traditional ordered list and create your own!


 


Style Your Ordered List- Here is a quick CSS tutorial on how you can use the ordered list <ol> and paragraph <p> element to design a stylish numbered list.  


 


List Based Calendar- A simple way to add multiple views to a calendar, so you can view your events in a simple list, or in a month based calendar format.  


 


  

Forms and Form Elements

Datasheet-style form using HTML and CSS- Make a datasheet-style web form using HTML, CSS and JavaScript with multiple similar records,


 


Styling File Inputs with CSS and the Dom - File inputs (<input type=”file” />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. Read more…

Share/Save/Bookmark

 

150 CSS Examples

Category: CSS, CSS Expert Ideas    |    2,667 views    |    3 Comments  |   

 

CSS Pagination

Pagination is a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Can be referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.

  • CSS Pagination Links- Inspired by the pagination interface you see at the footer of Digg.com.
  • Pagination 101- Pagination 101, that will give you some clues as to what makes good pagination.
  • Some styles for your pagination- Styles for WP-Digg style pagination plugin, Digg Style pagination Class, the modular version, and the original programed bye strangerstudios.

 

Block Hover Effect Links

Read more…

Share/Save/Bookmark

 

Top 100 CSS Techniques

Category: CSS, CSS Expert Ideas    |    676 views    |    Add a Comment  |   

 

CSS Rounded Corners

Rounded corners is one of the most popular and frequently requested CSS techniques. There lots of ways to create rounded corners with CSS, but they always require lots of complex HTML and CSS. Here are easy ways to achieve this effect.

  • Even More Rounded Corners With CSS- Single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency throughout, gradients, patterns and whatever else you could want. 
    Demo :


  • Rounded corners in CSS- Simple bordered div which contained four divs that each had a background-image and that were positioned in each of the corners.
  • Liquid rounded corners- For liquid design and transparent scrolling - tutorial and stylesheet
  • Mountaintop Corners- easier way for creating decent rounded corners.

 

CSS Sprites

CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.

Read more…

Share/Save/Bookmark

  • No Related Post

 

HTML Character Sets

Category: CSS Expert Ideas    |    232 views    |    Add a Comment  |   

ISO Character Sets

It is the International Standards Organization (ISO) that defines the standard character-sets for different alphabets/languages.

The different character-sets being used around the world are listed below:

Character set Description Covers
ISO-8859-1 Latin alphabet part 1 North America, Western Europe, Latin America, the Caribbean, Canada, Africa
ISO-8859-2 Latin alphabet part 2 Eastern Europe
ISO-8859-3 Latin alphabet part 3 SE Europe, Esperanto, miscellaneous others
ISO-8859-4 Latin alphabet part 4 Scandinavia/Baltics (and others not in ISO-8859-1)
ISO-8859-5 Latin/Cyrillic part 5 The languages that are using a Cyrillic alphabet such as Bulgarian, Belarusian, Russian and Macedonian
ISO-8859-6 Latin/Arabic part 6 The languages that are using the Arabic alphabet
ISO-8859-7 Latin/Greek part 7 The modern Greek language as well as mathematical symbols derived from the Greek
ISO-8859-8 Latin/Hebrew part 8 The languages that are using the Hebrew alphabet
ISO-8859-9 Latin 5 part 9 The Turkish language. Same as ISO-8859-1 except Turkish characters replace Icelandic ones
ISO-8859-10 Latin 6 Lappish, Nordic, Eskimo The Nordic languages
ISO-8859-15 Latin 9 (aka Latin 0) Similar to ISO 8859-1 but replaces some less common symbols with the euro sign and some other missing characters
ISO-2022-JP Latin/Japanese part 1 The Japanese language
ISO-2022-JP-2 Latin/Japanese part 2 The Japanese language
ISO-2022-KR Latin/Korean part 1 The Korean language

 

Read more…

Share/Save/Bookmark

  • No Related Post

 

XHTML Standard Event Attributes

Category: CSS Expert Ideas    |    173 views    |    Add a Comment  |   

Standard Event Attributes

Below is the standard event attributes that can be inserted into HTML / XHTML elements to define event actions.

<body> and <frameset> Events

The two attributes below can only be used in <body> or <frameset>:

Attribute Value Description
onload script Script to be run when a document load
onunload script Script to be run when a document unload

Form Events

The attributes below can be used in form elements:

Attribute Value Description
onblur script Script to be run when an element loses focus
onchange script Script to be run when an element change
onfocus script Script to be run when an element gets focus
onreset script Script to be run when a form is reset
onselect script Script to be run when an element is selected
onsubmit script Script to be run when a form is submitted

 

Keyboard Events

Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.

Attribute Value Description
onkeydown script Script to be run when a key is pressed
onkeypress script Script to be run when a key is pressed and released
onkeyup script Script to be run when a key is released

 

Mouse Events

Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.

Attribute Value Description
onclick script Script to be run on a mouse click
ondblclick script Script to be run on a mouse double-click
onmousedown script Script to be run when mouse button is pressed
onmousemove script Script to be run when mouse pointer moves
onmouseout script Script to be run when mouse pointer moves out of an element
onmouseover script Script to be run when mouse pointer moves over an element
onmouseup script Script to be run when mouse button is released

Share/Save/Bookmark

  • No Related Post

 

HTTP Status Messages

Category: CSS, CSS Expert Ideas    |    199 views    |    Add a Comment  |   

When a browser requests a service from a web server, an error might occur.

This is a list of HTTP status messages that might be returned:

1xx: Information

Message: Description:
100 Continue Only a part of the request has been received by the server, but as long as it has not been rejected, the client should continue with the request
101 Switching Protocols The server switches protocol

2xx: Successful

Message: Description:
200 OK The request is OK
201 Created The request is complete, and a new resource is created 
202 Accepted The request is accepted for processing, but the processing is not complete
203 Non-authoritative Information  
204 No Content  
205 Reset Content  
206 Partial Content  

3xx: Redirection Read more…

Share/Save/Bookmark

  • No Related Post

 

XHTML Standard Attributes

Category: CSS, CSS Expert Ideas    |    226 views    |    Add a Comment  |   

The attributes listed below are standard, and are supported by all HTML and XHTML tags, with a few exceptions.

Core Attributes

Not valid in base, head, html, meta, param, script, style, and title elements.

Attribute Value Description
class classname Specifies a classname for an element
id id Specifies a unique id for an element
style style_definition Specifies an inline style for an element
title text  Specifies extra information about an element

Language Attributes

Not valid in base, br, frame, frameset, hr, iframe, param, and script elements. Read more…

Share/Save/Bookmark

  • No Related Post