IdealProgrammer.com » HTML / CSS http://idealprogrammer.com Take a Little Action each Day to Transform Yourself into the Ideal Programmer Sun, 22 Apr 2012 16:50:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 new css trick to show/hide contenthttp://idealprogrammer.com/net-languages/code-samples/html-css/css-trick-showhide-content/ http://idealprogrammer.com/net-languages/code-samples/html-css/css-trick-showhide-content/#comments Thu, 02 Dec 2010 15:36:37 +0000 Saurabh http://idealprogrammer.com/?p=2938 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.

Read more on new css trick to show/hide content…

new css trick to show/hide content is a post from: IdealProgrammer.com

Related posts:

  1. How can you style your html content area If you are deciding to make your own website or...
  2. How to make a simple navigation bar In this tutorial . I will show you how you...
  3. How to use images correctly in html Webpages are not complete without images ? But it is...

Related posts brought to you by Yet Another Related Posts Plugin.

new css trick to show/hide content is a post from: IdealProgrammer.com

Related posts:
  1. How can you style your html content area If you are deciding to make your own website or...
  2. How to make a simple navigation bar In this tutorial . I will show you how you...
  3. How to use images correctly in html Webpages are not complete without images ? But it is...
Related posts brought to you by Yet Another Related Posts Plugin.]]> 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 .

  1. See the width and height of the image .
  2. Now write an css rule for the image
  3. 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 for this tutorial i took an image of width- 400px and height-200px . And i am positioning it at 10px from the top and -350 px from the left ( That's the trick) .

If we specify a negative value to left it will start from that value but we cant see that part of the image. I uses -350px because i only want to show 50px of image portion on my page . Rest 350px will not be displayed on the page.

Now comes the hover effect

css:-

img:hover{

left:0px;

}

Just this much of code. Here we specify that image should be 0px from the left so that it can visible on the page.

By doing this we can see full image . And when we release the mouse pointer from image to other part of body image again goes to -350px from the left and only 50px image is visible.

 

new css trick to show/hide content is a post from: IdealProgrammer.com

Related posts:

  1. How can you style your html content area If you are deciding to make your own website or...
  2. How to make a simple navigation bar In this tutorial . I will show you how you...
  3. How to use images correctly in html Webpages are not complete without images ? But it is...

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://idealprogrammer.com/net-languages/code-samples/html-css/css-trick-showhide-content/feed/ 0 How to make a simple navigation barhttp://idealprogrammer.com/net-languages/code-samples/html-css/simple-navigation-bar/ http://idealprogrammer.com/net-languages/code-samples/html-css/simple-navigation-bar/#comments Fri, 26 Nov 2010 17:05:10 +0000 Saurabh http://idealprogrammer.com/?p=2923 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

Read more on How to make a simple navigation bar…

How to make a simple navigation bar is a post from: IdealProgrammer.com

Related posts:

  1. Css 2 column layout Simple 2 column CSS layout This is a tutorial on...
  2. Spry tabbed panels In this tutorial i will talk about spry tabbed panels...
  3. Face Attribute Example – HTML Syntax – Face Attribute Example Face Attribute - HTML Syntax - Example...

Related posts brought to you by Yet Another Related Posts Plugin.

How to make a simple navigation bar is a post from: IdealProgrammer.com

Related posts:
  1. Css 2 column layout Simple 2 column CSS layout This is a tutorial on...
  2. Spry tabbed panels In this tutorial i will talk about spry tabbed panels...
  3. Face Attribute Example – HTML Syntax – Face Attribute Example Face Attribute - HTML Syntax - Example...
Related posts brought to you by Yet Another Related Posts Plugin.]]> 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 bar and make it more stylish . Here is the new cide with minimal changes

li{
 display:inline;

padding:15px;

background-color:black;

color:white;

}

li:hover{

background-color:red;
padding-bottom:5px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif

}
 

Here we have added more properties in css rule that is li:hover{}

When user hovers his/her mouse the bottom padding will decrease which will distinguish the selected navigation menu item from others. 

Second thing that will change is the font .

Here is the screenshot:-

How to make a simple navigation bar is a post from: IdealProgrammer.com

Related posts:

  1. Css 2 column layout Simple 2 column CSS layout This is a tutorial on...
  2. Spry tabbed panels In this tutorial i will talk about spry tabbed panels...
  3. Face Attribute Example – HTML Syntax – Face Attribute Example Face Attribute - HTML Syntax - Example...

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://idealprogrammer.com/net-languages/code-samples/html-css/simple-navigation-bar/feed/ 1 style your first letter using csshttp://idealprogrammer.com/net-languages/code-samples/html-css/style-letter-css/ http://idealprogrammer.com/net-languages/code-samples/html-css/style-letter-css/#comments Fri, 26 Nov 2010 11:10:28 +0000 asp.net videos http://idealprogrammer.com/?p=2916 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>

Read more on style your first letter using css…

style your first letter using css is a post from: IdealProgrammer.com

Related posts:

  1. how to style quotes using css source: http://www.cssnewbie.com/six-ways-style-blockquotes/   The blockquote XHTML tag is a fairly...
  2. css advanced selectors Combinators The advanced combinators allow you to define styles that...
  3. Style Attribute Example – HTML Syntax – HTML Style Example Style Attribute Example - HTML Syntax - HTML Style Example...

Related posts brought to you by Yet Another Related Posts Plugin.

style your first letter using css is a post from: IdealProgrammer.com

Related posts:
  1. how to style quotes using css source: http://www.cssnewbie.com/six-ways-style-blockquotes/   The blockquote XHTML tag is a fairly...
  2. css advanced selectors Combinators The advanced combinators allow you to define styles that...
  3. Style Attribute Example – HTML Syntax – HTML Style Example Style Attribute Example - HTML Syntax - HTML Style Example...
Related posts brought to you by Yet Another Related Posts Plugin.]]> 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 pseudo-element

<html>
<head>
<style type="text/css">
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>You can use the :first-line pseudo-element to add a special effect to the first line of a text.</p>
</body>
</html>

When can this be useful?

Again this can be useful in the starting line of the parragraph or webpage.

Checkout this awesome tutorial on creating a book style effect using css

http://www.cssnewbie.com/book-style-chapter-intros/

Find Out More >> http://www.w3schools.com/CSS/pr_pseudo_first-letter.asp

http://www.w3schools.com/Css/pr_pseudo_first-line.asp

style your first letter using css is a post from: IdealProgrammer.com

Related posts:

  1. how to style quotes using css source: http://www.cssnewbie.com/six-ways-style-blockquotes/   The blockquote XHTML tag is a fairly...
  2. css advanced selectors Combinators The advanced combinators allow you to define styles that...
  3. Style Attribute Example – HTML Syntax – HTML Style Example Style Attribute Example - HTML Syntax - HTML Style Example...

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://idealprogrammer.com/net-languages/code-samples/html-css/style-letter-css/feed/ 0 how to style quotes using csshttp://idealprogrammer.com/net-languages/code-samples/html-css/style-quotes-css/ http://idealprogrammer.com/net-languages/code-samples/html-css/style-quotes-css/#comments Wed, 17 Nov 2010 09:23:54 +0000 asp.net videos http://idealprogrammer.com/?p=2892 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 this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?

Read more on how to style quotes using css…

how to style quotes using css is a post from: IdealProgrammer.com

Related posts:

  1. How can you style your html content area If you are deciding to make your own website or...
  2. Style Attribute Example – HTML Syntax – HTML Style Example Style Attribute Example - HTML Syntax - HTML Style Example...
  3. Css 2 column layout Simple 2 column CSS layout This is a tutorial on...

Related posts brought to you by Yet Another Related Posts Plugin.

how to style quotes using css is a post from: IdealProgrammer.com

Related posts:
  1. How can you style your html content area If you are deciding to make your own website or...
  2. Style Attribute Example – HTML Syntax – HTML Style Example Style Attribute Example - HTML Syntax - HTML Style Example...
  3. Css 2 column layout Simple 2 column CSS layout This is a tutorial on...
Related posts brought to you by Yet Another Related Posts Plugin.]]> 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 this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?

Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who’s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.

Color and Borders

Applying a color change to the text and adding a border (along with some additional margins and padding) can really make the blockquote stand out, yet is subtle enough to retain a hint of sophistication.

1
2
3
4
5

blockquote {
	margin: 1em 3em;
	color: #999;
	border-left: 2px solid #999;
	padding-left: 1em; }

Background Colors

If you’d like something a little more obvious than just a text color change, you might considering altering your background color instead. This causes the blockquote to “pop,” making it immediately more noticeable. When applying background colors, be sure to account for any tags inside that might alter your margins (such as paragraph tags).

1
2
3
4
5
6

blockquote {
	margin: 1em 3em;
	padding: .5em;
	background-color: #f6ebc1; }
blockquote p {
	margin: 0; }

Background Colors and Borders

Of course, we’re not just limited to either-or, here. A background color in addition to a border in a complementary color is a nice effect, particularly on sites that are a little bit more “glossy.”

1
2
3
4
5
6
7

blockquote {
	margin: 1em 3em;
	padding: .5em 1em;
	border-left: 5px solid #fce27c;
	background-color: #f6ebc1; }
blockquote p {
	margin: 0; }

Background Images

We’re also not just limited to colors! Many websites make use of background images in their blockquotes to help distinguish them from the surrounding text. The background image might appear below the text, or perhaps off to the side (like we’ve done here) by way of a wider left padding.

1
2
3
4

blockquote {
	margin: 1em 20px;
	padding-left: 50px;
	background: transparent url(quote.gif) no-repeat; }

Drop-Caps and Styled Lines

Borrowing from my Book-Style Chapter Introductions article, we can also distinguish our blockquotes by using drop-caps, stylized text, or (in this example’s case) both at the same time. Here, we’re making use of the first-letter and first-line pseudo-classes, so browser support may not be 100% in older browsers.

1
2
3
4
5
6
7
8
9
10
11
12

blockquote {
	margin: 1em 2em;
	border-left: 1px dashed #999;
	padding-left: 1em; }
blockquote p:first-letter {
	float: left;
	margin: .2em .3em .1em 0;
	font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
	font-size: 220%;
	font-weight: bold; }
blockquote p:first-line {
	font-variant: small-caps; }

Text and Color

Or, if you’d rather go the subtle-but-effective route, you might consider altering the color of the text in the blockquote, as well as the font style or variant. Also in this example, I’m making use of the :before and :after pseudo-classes to insert content into my document – namely, the quotation marks at the beginning and end of the text. Of course, :before and :after aren’t supported by all browsers, so… caveat emptor, and all that.

1
2
3
4
5
6
7
8
9

blockquote {
	color: #66a;
	font-weight: bold;
	font-style: italic;
	margin: 1em 3em; }
blockquote p:before {
	content: '"'; }
blockquote p:after {
	content: '"'; }

how to style quotes using css is a post from: IdealProgrammer.com

Related posts:

  1. How can you style your html content area If you are deciding to make your own website or...
  2. Style Attribute Example – HTML Syntax – HTML Style Example Style Attribute Example - HTML Syntax - HTML Style Example...
  3. Css 2 column layout Simple 2 column CSS layout This is a tutorial on...

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://idealprogrammer.com/net-languages/code-samples/html-css/style-quotes-css/feed/ 0 High quality professional templates in csshttp://idealprogrammer.com/net-languages/code-samples/html-css/high-quality-professional-templates-css/ http://idealprogrammer.com/net-languages/code-samples/html-css/high-quality-professional-templates-css/#comments Mon, 01 Nov 2010 10:12:59 +0000 asp.net videos http://idealprogrammer.com/?p=2791 1. mCube

1

Download : http://www.templateworld.com/freetemplates/zero/track.php?id=58&flag=2

2. CoolBlue
2

Download: http://www.styleshout.com/hits.php?type=tmp&id=31&url=templates/downloads/CoolBlue10.zip&PHPSESSID=b2ac61b7d0372f1683d9d45a0bd737f8

3. Jungleland
3

Download : http://www.styleshout.com/hits.php?type=tmp&id=30&url=templates/downloads/Jungleland10.zip&PHPSESSID=b2ac61b7d0372f1683d9d45a0bd737f8

4. LawyerAttorney
4

Download : http://www.styleshout.com/hits.php?type=tmp&id=31&url=templates/downloads/CoolBlue10.zip&PHPSESSID=b2ac61b7d0372f1683d9d45a0bd737f8

16. Minimal Design Template

5

Download : http://www.tuttoaster.com/code-up-an-awesome-minimal-web-design-from-psd-to-xhtml-css/

iPhone App

http://devsnippets.com/img/templates/template20.jpg

Download: http://www.csstemplatesfree.org/iphone-app.html

Also check this blog post here for more designs : http://www.hongkiat.com/blog/60-high-quality-free-web-templates-and-layouts/

Read more on High quality professional templates in css…

High quality professional templates in css is a post from: IdealProgrammer.com

Related posts:

  1. Using photoshop to design webpages Here you can find best photoshop tutorials on how you...
  2. Programming Languages News the best programming language for lego mindstorms, hands down...
  3. creating wordpress template from photoshop If you want to create wordpress templates with your favourite...

Related posts brought to you by Yet Another Related Posts Plugin.

High quality professional templates in css is a post from: IdealProgrammer.com

Related posts:
  1. Using photoshop to design webpages Here you can find best photoshop tutorials on how you...
  2. Programming Languages News the best programming language for lego mindstorms, hands down...
  3. creating wordpress template from photoshop If you want to create wordpress templates with your favourite...
Related posts brought to you by Yet Another Related Posts Plugin.]]> 1. mCube

1

Download : http://www.templateworld.com/freetemplates/zero/track.php?id=58&flag=2

2. CoolBlue
2

Download: http://www.styleshout.com/hits.php?type=tmp&id=31&url=templates/downloads/CoolBlue10.zip&PHPSESSID=b2ac61b7d0372f1683d9d45a0bd737f8

3. Jungleland
3

Download : http://www.styleshout.com/hits.php?type=tmp&id=30&url=templates/downloads/Jungleland10.zip&PHPSESSID=b2ac61b7d0372f1683d9d45a0bd737f8

4. LawyerAttorney
4

Download : http://www.styleshout.com/hits.php?type=tmp&id=31&url=templates/downloads/CoolBlue10.zip&PHPSESSID=b2ac61b7d0372f1683d9d45a0bd737f8

16. Minimal Design Template

5

Download : http://www.tuttoaster.com/code-up-an-awesome-minimal-web-design-from-psd-to-xhtml-css/

iPhone App

http://devsnippets.com/img/templates/template20.jpg

Download: http://www.csstemplatesfree.org/iphone-app.html

Also check this blog post here for more designs : http://www.hongkiat.com/blog/60-high-quality-free-web-templates-and-layouts/

If you have any suggestions and comments use idealprogrammer fourms.

High quality professional templates in css is a post from: IdealProgrammer.com

Related posts:

  1. Using photoshop to design webpages Here you can find best photoshop tutorials on how you...
  2. Programming Languages News the best programming language for lego mindstorms, hands down...
  3. creating wordpress template from photoshop If you want to create wordpress templates with your favourite...

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://idealprogrammer.com/net-languages/code-samples/html-css/high-quality-professional-templates-css/feed/ 0 Learn css positioning with exampleshttp://idealprogrammer.com/net-languages/code-samples/html-css/learn-css-positioning-examples/ http://idealprogrammer.com/net-languages/code-samples/html-css/learn-css-positioning-examples/#comments Sun, 31 Oct 2010 09:36:29 +0000 asp.net videos http://idealprogrammer.com/?p=2767 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 on Learn css positioning with examples…

Learn css positioning with examples is a post from: IdealProgrammer.com

Related posts:

  1. what is fixed positioning in css ? Fixed positioning in css is very easy to learn and...
  2. css image switcher Roll over a link, watch the image above change. That’s...
  3. Introduction to Ruby on Rails – Best Rated Free Video Tutorials Here are some of the best rated free video tutorials...

Related posts brought to you by Yet Another Related Posts Plugin.

Learn css positioning with examples is a post from: IdealProgrammer.com

Related posts:
  1. what is fixed positioning in css ? Fixed positioning in css is very easy to learn and...
  2. css image switcher Roll over a link, watch the image above change. That’s...
  3. Introduction to Ruby on Rails – Best Rated Free Video Tutorials Here are some of the best rated free video tutorials...
Related posts brought to you by Yet Another Related Posts Plugin.]]> 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/

Learn css positioning with examples is a post from: IdealProgrammer.com

Related posts:

  1. what is fixed positioning in css ? Fixed positioning in css is very easy to learn and...
  2. css image switcher Roll over a link, watch the image above change. That’s...
  3. Introduction to Ruby on Rails – Best Rated Free Video Tutorials Here are some of the best rated free video tutorials...

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://idealprogrammer.com/net-languages/code-samples/html-css/learn-css-positioning-examples/feed/ 0 Free css tutorial serieshttp://idealprogrammer.com/net-languages/code-samples/html-css/free-css-tutorial-series/ http://idealprogrammer.com/net-languages/code-samples/html-css/free-css-tutorial-series/#comments Sun, 31 Oct 2010 09:30:10 +0000 asp.net videos http://idealprogrammer.com/?p=2764 If you want to learn best stuff that you can do with css you can use this awesome website :-

http://css-tricks.com/video-screencasts/

Here is a short css video series too :

http://www.2createawebsite.com/design/css-tutorial.html

Read more on Free css tutorial series…

Free css tutorial series is a post from: IdealProgrammer.com

Related posts:

  1. Free Dreamweaver Tutorial series Do you want free dreamweaver tutorials Well now you can...
  2. Silverlight 3 Tutorial – (Four Hours of Free Videos by Microsoft Experts) Interested in Silverlight 3? Here you will find four hours...
  3. Free visual studio 2010 ebook Microsoft Press has released a free book titled Moving To...

Related posts brought to you by Yet Another Related Posts Plugin.

Free css tutorial series is a post from: IdealProgrammer.com

Related posts:
  1. Free Dreamweaver Tutorial series Do you want free dreamweaver tutorials Well now you can...
  2. Silverlight 3 Tutorial – (Four Hours of Free Videos by Microsoft Experts) Interested in Silverlight 3? Here you will find four hours...
  3. Free visual studio 2010 ebook Microsoft Press has released a free book titled Moving To...
Related posts brought to you by Yet Another Related Posts Plugin.]]> If you want to learn best stuff that you can do with css you can use this awesome website :-

http://css-tricks.com/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

Free css tutorial series is a post from: IdealProgrammer.com

Related posts:

  1. Free Dreamweaver Tutorial series Do you want free dreamweaver tutorials Well now you can...
  2. Silverlight 3 Tutorial – (Four Hours of Free Videos by Microsoft Experts) Interested in Silverlight 3? Here you will find four hours...
  3. Free visual studio 2010 ebook Microsoft Press has released a free book titled Moving To...

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://idealprogrammer.com/net-languages/code-samples/html-css/free-css-tutorial-series/feed/ 0 css image switcherhttp://idealprogrammer.com/net-languages/code-samples/html-css/css-image-switcher/ http://idealprogrammer.com/net-languages/code-samples/html-css/css-image-switcher/#comments Sun, 31 Oct 2010 09:24:50 +0000 asp.net videos http://idealprogrammer.com/?p=2762 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

Read more on css image switcher…

css image switcher is a post from: IdealProgrammer.com

Related posts:

  1. what is fixed positioning in css ? Fixed positioning in css is very easy to learn and...
  2. Absolute and Relative path for beginners When you're creating links to documents and images on the...
  3. Free Dreamweaver Tutorial series Do you want free dreamweaver tutorials Well now you can...

Related posts brought to you by Yet Another Related Posts Plugin.

css image switcher is a post from: IdealProgrammer.com

Related posts:
  1. what is fixed positioning in css ? Fixed positioning in css is very easy to learn and...
  2. Absolute and Relative path for beginners When you're creating links to documents and images on the...
  3. Free Dreamweaver Tutorial series Do you want free dreamweaver tutorials Well now you can...
Related posts brought to you by Yet Another Related Posts Plugin.]]> 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)

css image switcher is a post from: IdealProgrammer.com

Related posts:

  1. what is fixed positioning in css ? Fixed positioning in css is very easy to learn and...
  2. Absolute and Relative path for beginners When you're creating links to documents and images on the...
  3. Free Dreamweaver Tutorial series Do you want free dreamweaver tutorials Well now you can...

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://idealprogrammer.com/net-languages/code-samples/html-css/css-image-switcher/feed/ 0