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!

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

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

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

Greensock-TweenMax Javascript animation (JQuery based)

Hello
This is the first post in this blog for javascript based stuff. I am using greensock products for years for flash/flex/air projects and I would not change their animation power with anything. So when greensock announced port to javascript I was thrilled, and excited to try out the “new” implementation… but wait… there is nothing “new” to the way we declare things… its the same compact and straightforward structure I used in flash! Amazing!

Plus it works with JQuery out of the box AND supports CSS animations, HTML properties animations, timeline animations and a bunch of other cool stuff.

So for my next trick I created a page with the pacman eating some dots, this was done in 10′ and the javascript required as you will see its minimum.

!Note: best viewed with a modern browser as I used css3 for the shapes.

Check it out: http://www.netgfx.com/trunk/animateJS/

Learn more about Greensock and its animation platform here: http://www.greensock.com/v12/