new css trick to show/hide content
I just found out a new way of showing/hiding images( In this tutorial we will talk about images only. But the technique can be applied to any element) Well first we need an image . Well most of you would like to use photoshop or other image editing app. Go For it !!! After you have an image . See the width and height of the image . Now write an css rule for the image We will only use image tag no id (to make it simple) Css:- img{ position:absolute; width:400px; height:200px; left:-350px; top:10px; } Note... [Read More...]
How to make a simple navigation bar
In this tutorial . I will show you how you can make a simple horizontal navigation bar. So first make an unordered list with few list items . Home About Contact Us Now let’s style it using css li{ display:inline; padding:10px; background-color:black; color:white; border:1 px solid white; } li:hover{ background-color:red; } Now run it and hover your mouse on it . See with so less code you have done wonders. Now you can upgrade your navigation... [Read More...]
style your first letter using css
Now you can style the first letter and first line the css . For styling first letter CSS :first-letter pseudo-element <html> <head> <style type=”text/css”> p:first-letter { color:#ff0000; font-size:xx-large; } </style> </head> <body> <p>This is a text.</p> </body> </html> When can this be useful? This can be useful for styling the first letter of an parragraph . CSS :first-line... [Read More...]
how to style quotes using css
source: http://www.cssnewbie.com/six-ways-style-blockquotes/ The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all... [Read More...]
High quality professional templates in css
1. mCube Download : http://www.templateworld.com/freetemplates/zero/track.php?id=58&flag=2 2. CoolBlue Download: http://www.styleshout.com/hits.php?type=tmp&id=31&url=templates/downloads/CoolBlue10.zip&PHPSESSID=b2ac61b7d0372f1683d9d45a0bd737f8 3. Jungleland Download : http://www.styleshout.com/hits.php?type=tmp&id=30&url=templates/downloads/Jungleland10.zip&PHPSESSID=b2ac61b7d0372f1683d9d45a0bd737f8 4. LawyerAttorney Download... [Read More...]
Learn css positioning with examples
If you want to learn css positioning with live examples of div’s which are begin positioned you can use the following website which are recommended for you . http://www.w3schools.com/css/css_positioning.asp and http://www.barelyfitz.com/screencast/html-training/css/positioning/ Read More →
Free css tutorial series
If you want to learn best stuff that you can do with css you can use this awesome website :- Video Screencasts Here is a short css video series too : http://www.2createawebsite.com/design/css-tutorial.html If you have any comments and suggestions on this article please use idealprogrammer forums Read More →
css image switcher
Roll over a link, watch the image above change. That’s what we build in this screencast, only we don’t use any JavaScript to do it. The trick is some simple z-index switching on hover and a bit of absolute positioning. Running Time: 12:20 Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready) Read More →
Understanding anchors in html
How to navigate to areas on the same page only ? Named Anchors – or how to jump within one and the same page The feature “Named Anchors” can be used to jump around within one and the same page (file) just like you’re used to do with regular links. Using the one can jump to these anchors. How to use Named Anchors A life example can be found on several pages on WeetHet. Maybe you can recall page overviews, where you can click... [Read More...]
Maths and programming
Well This may sound little bit silly but cartesian plane which we need to be good at cartesian plane to learn some good programming Yes i know you might be wondering we learned this when we were 13-14 in mathematics but why do we need to learn it for programming ? Well the answer is the cartesian plane is also widely used in programming take vb.net example for instance for drawing a line we need to tell x and y cordinates dont we have to ? And another... [Read More...]
Css 2 column layout
Simple 2 column CSS layout This is a tutorial on how to use CSS to create a simple two column layout.. The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window. A pretty basic layout, and not at all difficult to create with CSS once you know how to deal with the inevitable Internet Explorer bugs. To see the full CSS used for each step, view... [Read More...]
