Help Wordpress

Blog about WordPress, plugins, themplates and more…
MENU
Home » News » RSS Icon via CSS

RSS Icon via CSS

rss-via-css

CSS3 allows us to draw very beautiful objects, and in some cases to dispense with the use of the usual graphics.
Let’s try to make the icon for RSS without the use of graphics. Our tool will CSS, as well as pseudo-classes :before and :after.

HTML-code consists of a single line:

<a href="your_site.com/your_feed/" class="rss-icon">RSS</a>

Result:
RSS
Now it does not look like the icon RSS, right? But we have not used CSS… Ready? Then let’s go :)
We make the block icons for the CSS. Since the icon is likely to be a link (inline-element), we have to make it block. Also we have to make positioning. In addition, move the text beyond the borders of sight.

.rss-icon{
	display:block;
	position:relative;
	padding:0;
	text-indent:-1600px;
}

Width, height, margins, colors and background can specify your own. In the example I will use 160×160 pixels, you can specify your own value. For example on my blog icon changes depending on the screen size.

.rss-icon{
	width:160px;
	height:160px;
	background:#e36443;
	background:-webkit-linear-gradient(top, #f19242, #e36443);
	background:-moz-linear-gradient(top, #f19242, #e36443);
	background:-o-linear-gradient(top, #f19242, #e36443);
	background:-ms-linear-gradient(top, #f19242, #e36443);
	background:linear-gradient(top, #f19242, #e36443);
	border-radius:10px;
}

Now our icon looks so:
RSS

We give the general properties for the pseudo-classes :before and :after. The property is “content” leave blank, also make an absolute positioning.

.rss-icon:before, .rss-icon:after{
	content:"";
	position:absolute;
	left:10px;
	bottom:10px;
}

Let us work with the pseudo-class :before.
It is a small block, which is set relatively large border-radius. For the visitor it will look like a small circle.

.rss-icon:before{
	width:35px;
	height:35px;
	background:#fff;
	border-radius:24px;
}

Now our icon looks so:
RSS

And finally pseudo-class :after. Pay attention to the property “border-style: double” – exactly it will allow us to show the two bands on the icon.
The size and the padding can specify their (remember, example for block 160×160 pixels).

.rss-icon:after{
	margin:10px 0 0 145px;
	width:64px;
	height:64px;
	border-style:double;
	border-width:75px 75px 0 0;
	border-color:#fff;
	border-radius:0 130px 0 0;
}

Outcome:
RSS

Sponsor: personal loans

Posted 2 years ago
Category: News
Tags: , ,

If the article proved helpful to you, please click on one of the buttons to share it with your friends. Thanks!

Related posts:

simple-rating-bar-via-stars

Simple rating bar via stars

I like simple solutions, because simple solution means reliability solution. For one of the projects I needed the rating bar consisting of stars. Basic requirements – a minimum [...]
ukraine-trident

Ukrainian Trident made by CSS

Today Ukraine is celebrating Independence Day. This year, because of the Russian invasion, the Independence Day will be different from past holidays: The traditional firework on Independence Day [...]

1 Comment

1 Comment


RSS feed for comments on this post.

Leave a comment


Last Polls: