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

Click and Drag multi-selection rectangle with Javascript

This is a nice solution for a problem occured when making strategy games or wireframe applications. Or generally when we want to select multiple items and have them in a visible group.
It is a rather simple solution once the math make sense.

Here’s a nice example I made on codepen. Simply click and drag to form a rectangle around one or both of the objects.

See the Pen Multiselect drag by Michael Dobekidis (@netgfx) on CodePen.

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Guess Who? HTML5 Game

I have released another HTML5 game on CodeCanyon.
big_banner
A classic game for a modern browser

Features:
HTML5 and CSS3 technologies
Supports all modern browsers and tablets
Multi-language architecture
Highly customizable to change avatars/pictures/names/questions
Fully functional with AI
No-globals means wordpress compatible
Files include version of the game in Greek. Names and questions can be changed to every language.

Game is already responsive but can be further extended via media-queries.


Continue reading

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

Image Gallery with TweenMax CSS3 effects and JQuery sauce

Recently Greensock added some new cool features to their animation JS Engine, these target specifically css3 animations and animating css3 properties.

So I thought to create a little demo showcasing some of these cool new features.

This Image gallery moves on 2 axis, horizontally for viewing different images and “vertically” or “in-time” if you prefer for viewing different galleries.

You can view a rough DEMO here

delorian

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin