Thursday, January 31, 2008

Photo Album with CSS only



















Posted by at No comments:

Monday, November 26, 2007

Multiple background images for safari only

<html>
<head>
<style>
div.test
{
background-image: #00ffff url(img.jpg) , url(ibm.jpg) ;
display:block;
background-repeat: repeat-y;
background-position: top left, top right;
width: 485px;
height: 400px;
border: 1px solid #000000;
}

</style>
</head>
<body>
<div class="test">Hello this is Vijayta Panchal, from delhi...</div>
</body>
</html>
Posted by at No comments:

Attach icons to anything with CSS 

a[href $='.pdf'] {
 padding-right: 18px;
 background: transparent url(icon_pdf.gif) no-repeat center right;
}

This would attach a pdf icon to the right of any hyperlink who's URL ended in '.pdf' like this. This was pretty exciting and heady stuff. It meant I could show the file type visually with that application's icon just by including a few lines in my master css file. I didn't have to worry about it at all in my html, css would add the icon for me automatically.

This trick makes use of what the official specifications call "attribute selectors".For instance in our above example we have our anchor tag which says to style this element for anchors and then, defined by brackets, [href $='.pdf'], we see if the anchor has an href attribute and if it does if that attributes value ends in '.pdf'.

This works with any attribute. For instance...


span[id ^='google'] {
  background-color: green;
}



Any span which has an id which starts with 'google' will be assigned a green background.

The kicker is that the attributes can be made up. That is you can create your own attributes. For instance, as I integrated askthecssguy's icons into my site I found his solution to work extremely well with mail and document types (pdf, word, excel, etc.), but because the ability to match and exclude substrings was so limited it didn't work very well for automatically detecting internal and external links.

I worked around this by creating my own attribute called icon and then matched it in css like this.



a[icon ^="out"] {
  padding-right: 20px;
  background: transparent url(http://www.hunlock.com/images/external.gif) no-repeat center right;
}

This looked for an attribute called icon and if the value began with "out" it
would show a little external icon beside the link like this.

HREF="someurl.com" icon="out">

Now that was pretty cool because it meant that I could define a visual icon to show beside my links just by adding my own attribute to my anchor, I could also add other icons as they became needed like popups or a magnifier. And the neat thing is that I could use them or not, as I wanted.

The epiphany came when I realized I could do the selection without needing a tag. What that means is that...



[icon ^="out"] {
  padding-right: 20px;
  background: transparent url(http://www.hunlock.com/images/external.gif) no-repeat center right;
}

now worked with ANY tag which had icon="out" as an attribute, be it or .

Now the conditional elements of the selectors are limited (which is the reason I had to opt for custom attributes), but they are powerful. The biggest obstacle is you can only match true, not false -- that is you can only look for what's there, not what's not. Here's an overview of the conditional syntax.



[foo]        -- Has an attribute named "foo"
[foo="bar"]  -- Has an attribute named "foo" with a value of "bar" ("bar")
[foo~="bar"] -- Value has the word "bar" in it somewhere ("blue bar stools")
[foo^="bar"] -- Value begins with "bar" ("barstool")
[foo$="bar"] -- Value ends with "bar" ("I was at the bar")
[foo*="bar"] -- Value has bar somewhere ("I was looking for barstools")  

With these simple selectors you can attach any style you want to any
object
either automatically (as in the case of checking for a file extension
in a HREF
attribute) or manually (by creating your own attributes). You can have
more than one attribute selector as well. For instance
[foo^="foo"][foo$="bar"] { background-color: blue } would style
anything
that had an attribute with a value which begins with foo and ends in
bar.


All by adding icon="out" to my tag like this...
Posted by at No comments:

Conditional comments for Internet Explorer AND non-IE browsers

The following statement will tell you if you are using Internet Explorer or not and if so which version.
Not unusual you may say, until you look closer and realise that Microsoft Conditional Comments are recognising non-IE browsers!

You are NOT using Internet Explorer

You can also target different versions of Internet Explorer AND non Internet Explorer.

If you are using either IE6 or a non IE browser then you will see the following text.
If you are using IE5.x or IE7 then you will not see any text.

You are using EITHER Internet Explorer version 6
OR a non-IE browser

And finally you can target specific IE browser AND non-IE browsers but feed a mixture of information to both.
The following will feed extra text to IE6 which will not be seen by non-IE browsers.

You are using a non-IE browser

IE6 will see 'You are using IE6 and not a non IE browser' and non-IE browsers will see 'You are using a non IE browser'. IE5.x and IE7 will see 'You are using'.

I don't know what use this last one will be but there may be an occasion when it will come in handy.


Information

The above text is generated using just conditional comments. There is no CSS, javascript, PHP or any other programming language involved.

This is just a demonstration of how Internet Explorer's conditional comments can be used to identify non-IE browsers and serve them with markup that will be hidden from Internet Explorer.

I have used this method in my most recent version of the CSS only dropdown menu.
The xhtml

The xhtml code for the normal conditional comments is straightforward as set out by Microsoft.

< !--[if IE]>
<>You are using Internet Explorer
< ![endif]-->
< !--[if IE 5]>
<>Version 5< /h1>
< ![endif]-->
< !--[if IE 5.0]>
<>Version 5.0< /h1>
< ![endif]-->
< !--[if IE 5.5]>
<>Version 5.5< /h1>
< ![endif]-->
< !--[if IE 6]>
<>Version 6< /h1>
< ![endif]-->
< !--[if IE 7]>
<>Version 7< /h1>
< ![endif]-->

I have found that the following code will allow you to target non-IE browsers

< !--[if !IE]>
<>You are NOT using Internet Explorer< /h1>
< !--

..and finally to target non-IE and a specific IE browser
(or any combinations using lte lt or gt gte).

< !--[if IE 6]>
<>You are using EITHER Internet Explorer version 6<>
OR a non-IE browser< /h1>
< !--

<>You are using
< !--[if IE 6]>IE6 and not < !-->
a non-IE browser
<!--< /h1>
Posted by at No comments:

Tuesday, November 6, 2007

CSS Properties

Text and Fonts

* font
* font-family
* font-size
* font-weight
* font-style
* font-variant
* line-height
* letter-spacing
* word-spacing
* text-align
* text-decoration
* text-indent
* text-transform
* vertical-align
* white-space

Colours and Backgrounds

* color
* background-color
* background
* background-image
* background-repeat
* background-position
* background-attachment

The Box Model - dimensions, padding, margin and borders

* padding, padding-top, padding-right, padding-bottom, padding-left
* border, border-top, border-right, border-bottom, border-left
* border-style, border-top-style, border-right-style, border-bottom-style, border-left-style
* border-color, border-top-color, border-right-color, border-bottom-color, border-left-color
* border-width, border-top-width, border-right-width, border-bottom-width, border-left-width
* outline
* outline-style
* outline-color
* outline-width
* margin, margin-top, margin-right, margin-bottom, margin-left
* width
* height
* min-width
* max-width
* min-height
* max-height

Positioning and Display

* position
* top
* right
* bottom
* left
* clip
* overflow
* z-index
* float
* clear
* display
* visibility

Lists

* list-style
* list-style-type
* list-style-image
* list-style-position

Tables

* table-layout
* border-collapse
* border-spacing
* empty-cells
* caption-side

Generated Content

* content
* counter-increment
* counter-reset
* quotes

Paged Media

* page-break-before
* page-break-after
* page-break-inside
* orphans
* widows

Misc.

* cursor
* direction
* unicode-bidi

The Whole Shebang

* background
* background-attachment
* background-color
* background-image
* background-position
* background-repeat
* border
* border-collapse
* border-color
* border-spacing
* border-style
* border-width
* bottom
* caption-side
* clear
* clip
* color
* content
* counter-increment
* counter-reset
* cursor
* direction
* display
* empty-cells
* float
* font
* font-family
* font-size
* font-style
* font-variant
* font-weight
* height
* left
* letter-spacing
* line-height
* list-style
* list-style-image
* list-style-position
* list-style-type
* margin
* max-height
* max-width
* min-height
* min-width
* orphans
* outline
* outline-color
* outline-style
* outline-width
* overflow
* padding
* page-break-after
* page-break-before
* page-break-inside
* position
* quotes
* right
* table-layout
* text-align
* text-decoration
* text-indent
* text-transform
* top
* unicode-bidi
* vertical-align
* visibility
* white-space
* widows
* width
* word-spacing
* z-index
Posted by at No comments:

Display Property

The display property sets how/if an element is displayed.

Display Value
  • none - no display at all.
  • inline - An inline box.
  • block - A block box.
  • inline-block - effectively a block box inside an inline box. Not supported by Mozilla at time of writing. IE will only apply inline-block to elements that are traditionally inline such as span or a but not p or div. Loopy.
  • run-in - Either an inline or block box depending on the context. If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. Crazy. Not supported by IE/Win or Mozilla at the time of writing.
  • list-item - the equivalent of the default styling of the HTML li element.
  • table - a block-level table - the equivalent of the default styling of the HTML table element. Not supported by IE.
  • inline-table - an inline-level table. Not supported by IE.
  • table-row-group - the equivalent of the default styling of the HTML tbody element. Not supported by IE.
  • table-header-group - the equivalent of the default styling of the HTML thead element. Not supported by IE.
  • table-footer-group - the equivalent of the default styling of the HTML tfoot element. Not supported by IE.
  • table-row - the equivalent of the default styling of the HTML tr element. Not supported by IE.
  • table-column-group - the equivalent of the default styling of the HTML colgroup element. Not supported by IE.
  • table-column - the equivalent of the default styling of the HTML col element. Not supported by IE.
  • table-cell - the equivalent of the default styling of the HTML td or th elements. Not supported by IE.
  • table-caption - the equivalent of the default styling of the HTML caption element. Not supported by IE.
Posted by at No comments:

Monday, November 5, 2007

advance CSS

Advance CSS Presentation Covered the following contents
1. Introduction
2. Box Model
3. The CSS box model is made up of four parts:
4. Box Model Issues
5. Styling List (CSS navigation)
6. CSS button
7. Rounded corner without images
8. Working with divs
9. Float
10. Clear
11. Tableless designs
12. CSS Hacks
13. Some Important hacks
14. !important
15. CSS box model hack
16. @import “non-ie.css” all;
17. Grouping styles
18. Nested Styles
19. Conditional CSS (With Examples)
20. Conditional CSS
21. Validation
22. Overview of XHTML
23. How do I convert to XHTML?”
24. Benefits to XHTML

http://docs.google.com/Presentation?id=dd4zbfn5_65hqrdm&invite=gzr6b99
Posted by at No comments:
Subscribe to: Posts (Atom)