Add/Remove text from HTML using only CSS

This is a neat trick that recently came very handy as I wanted to change the text of a paragraph tag but only had access to the .css file of the page.

Heres what it looked like:



<p class="someclass">
   <a href="#">Some Link</a>
   "Some text embeded in the paragraph tag, oh my!"
</p>

Yes it was that bad. So here’s what I came up with (might be around for sometime now, but could not find something fast in google)

The CSS:


.someclass{
   color: rgba(0,0,0,0); /* to make inside text invisible */
   text-align: center;
   white-space: pre;
}

.someclass a {
   display: none;
}

.someclass:before {
   content: "Powered by Netgfx.com";
   color:#ffffff;
   text-align: center;
   font-weight: bold;
}

So what we did here was to make the existing text invisible by applying a color using rgba and setting the alpha to 0, and then add some new text with the css “content” attribute and the pseudo-selector :before/:after.

Problem solved!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Create simple graph with css flexbox

When I first read about flexbox I was quite sceptical because I thought that this would be poorly executed and the developers would have to hack around several things.
But I was delighted to be wrong… flexbox seems quite promising and it actually makes creating a simple timeline graph a 5 minute procedure.

For those unfamiliar with the CSS Flexbox spec here are some cool resources:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Now onward to our little project.

What we are trying to achieve here is to create a “timeline” based block-graph.

This is the end result:

See the Pen Flexbox graph by Michael Dobekidis (@netgfx) on CodePen

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

All Available CSS Color Names

For a fun project I wrote a little javascript class/function that returns all the availabe CSS color-names like (“red”,”royalBlue”,etc) in many different ways (assosiative-array, indexed-array, object,etc) as well as the selected color shades.

You can find it on gitHub here -> ColorNames Fn

And some examples here -> Examples

[[code]]czowOlwiXCI7e1smKiZdfQ==[[/code]]<a href="http://codepen.io/netgfx/pen/hvsfB">Check out this Pen!</a>

The use is quite easy and it has no library dependencies

Engage the function:


var colorNames = new ColorNames({
"numOfShades":10 // optional
});

And then ask for the type of return object that you wish:


var _colorNames = colorNames.returnItems('all_names'); // returns only the names of the colors
var _colorValues = colorNames.returnItems('all_indexed_obj'); // returns an array of objects that contain both names and colors

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin