I decided to make this a git project. Still a work in progress, although, unlike previous examples, this tooltip has an arrow and allows for different position placements. You can check out the project here or the full demo here.
It uses HTML5 Data attribute to populate the CSS “content” property. So if you have mark up like this;
<div data-somecontent="this is my conten"> hi there. </div>
Then use a CSS selector
div {
content: …
I have been experimenting with the CSS content property quite a bit lately. What I discovered is you can populate it with the HTML data attribute.
For example, say we wanted an item to have a tooltip. We would write out the HTML like this:
<a href="#" id="my-link" data-tooltip="this is my tooltip data">This is my link</a>
Now in the CSS all we have to do is:
#my-link {
position: relative;
}
#my-link:before {
diplay: …
The World Wide Web started its life as a series of simple, text-based, read-only homepages whose sole purpose was to act as a digital business card and brochure. From this, Web 2.0 evolved, and this dynamic, interactive approach now informs our online life. Web 2.0 is about much more than page design; from static pages grew a community-driven, user-generated web where collaboration and information are unified.
For example, in order to rank sites …
Our industry is over 20 years old now. Mosiac, the first web browser was release in 1993 followed by Opera in ’94 and Internet Explorer in ’95. Mostly we were reduced to viewing text files and eXcel like tables for our web pages. Linking to separate pages/documents was like a revolution in the HTML world that held engieneers in awe of the infinite possibilities.
Then the browser war ensued followed by the first bubble bursting/web crash. Many …
Once upon a time web design / interface design was simply the act of taking a portrait designed brochure and turning it on its side to create a landscape layout with buttons stuck on to make it cool and new media.
There wasn’t a convention of what constituted good or bad web layout, semantic mark up or even screen width. Everything seemed to change depending on who was designing / coding the said site.
Not even the web browsers could agree on how …
I’ve seen some amazing JS & HTML5 experiments but this one has blown me away – the original Command and Conquer.
Created and completed in a month by Aditya Ravi Shankar. Check it out on github as it’s an incredibly ambitious project.