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!"

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:

   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";
   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!


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:

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


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="">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