local SEO website not ranking
2018 Addy Awards Silver Addy WInner
best marketing tips of February 2018
logo design process
Perseverance, opportunity and the right marketing tools
marketing plan
Best of January 2018 Tech News
The Pinkletter

The January Pinkletter

The Most Useful Features from HTML5 & CSS 3

In the past years you’ve probably heard terms such as  HTML5, CSS3 and social networking, but it’s possible that you never took the time to study them firsthand.

The first thing you need to know is that these two terms are defined by the Web 2.0 concept, meaning that you can’t really talk about them unless you know what Web 2.0 stands for. Don’t worry, in the last few years you’ve had more than enough interactions with it and you probably didn’t even notice.

Let us throw some light over the Web 2.0 concept. It is all about users interacting with each other by means of social networking so that they can exchange dialogues, videos, blogs, wikis and any everything else you can think of. Of course, there’s a lot more to it than this, but this is basically what the average user is interested in.

As for HTML5 and CSS3, the two of them are focused on delivering a Web 2.0 compliant visual interface, meaning that creating and maintaining websites will get easier than you think. For one, successfully using these two standardizations will definitely ease your job  and your websites will be more manageable.

The HTML5 Most Beloved Features

If you’re familiar with HTML 4, the first thing that you’ll notice is that some elements have been removed, more precisely those that refer to the presentation aspect. Tags such as <font> and <center> will no longer be supported and instead, CSS3 will completely take over the visual aspect of the webpage.

There have also been added some new and more intuitive semantic representations for the <div> and <span> tags, like the website navigation block that will be referred to with the <nav> tag, along with the <footer> tag.

From now on, you will no longer have to download and install browser plugins to watch videos or listen to music, HTML5 allowing you to use the <video> and <audio> tags so that you can directly embed media on your webpage. This way, regardless the browser that the end-user is using, they will still be able to listen to and watch videos without a care in the world.

<video src="movie.ogg" controls="controls"></video>

Another great example of how powerful HTML5 became, is that you can add drag-and-drop features on your website, without having to use any outside help from strange plugins. There’s a really nice example on HTML5 demos website.

DOCTYPE sniffing browsers will now have to read a new introducing line (like a SGML document declaration) that will trigger a standards-compliant rendering system, making the content universally compatible, in terms of visual layout. In translation, you can use any browser you want and the webpage will be viewed exactly the same way.

Global attributes will now be supported by any element, allowing you to attribute an id, tabindex and even a hidden property to almost everything  you want to. In terms of flexibility, this is a truly great asset, greatly simplifying content management.

The simplest example that we could find showing off this 2D drawing support, can be found at thinkvitamin.com and it will quickly get you up to speed with all the basic stuff that you need, if you want to use HTML5 attributes to draw 2D complex shapes.

So, on an overall basis, HTML5 is definitely the next step towards building cross compatibility between various internet-friendly devices. Whether it’s your handheld or desktop PC, the goal is to get the same type of accurate display and access to the same data.

Why We Love CSS3

The most basic definition of cascading style sheets is that they separate the content of a webpage (HTML code) from the presentation. Ordinarily, CSS is just a markup language used to get your HTML-friendly webpages to look stylish, without overcrowding the .html document.

Cascading Style Sheets are also used to refurbish any type of XML document starting from SVG’s (Scalable Vector Graphics) and up to XUL (XML User Interface) files. Using CSS file types is the only way that you can easily transfer visual features and properties from one webpage to another, without having to move around the actual code from one HTML file to another.

What’s so special about CSS3 is that it’s been built on modules. Although still in development, it’s reported that there are about 40 different modules (some stable while others are not) that refer to Namespaces, Selectors, Media Queries and Color.

Color Module Example

The Color Module is probably the one you’ll be using most, because you now have four new color formats to work with. HSL (hue, saturation, lightness), CMYK (cyan, magenta, yellow, black), HSLA (hue, saturation, lightness, alpha) and RGBA (red, green, blue, alpha) are basically what you will need in case you decide to create color palettes, decide how colors to get printed and how you can manipulate the transparency of the color by using the alpha parameter. You can find everything worth knowing on W3.org.

Choosing CSS3 you will now have the ability to create rounded borders without the help of images or JavaScript and simply trying out some code that goes like this:


.box {
border: 2px solid orange;
border-radius : 25px;
width: 100px;
padding:10px;
}

Getting into more specific details, you can even swap a border for an image by simply using the border-image property and you can also add a shadow for a box element, if you want to. The following two code lines will give you a small example on how this can be achieved:

<div class="code">
#col {
border-image: url(border_image.png) 100 100 100 100 round round;
border-width: 10px;
}
</div>

<div class="code">
.shadow {
background-color: #EEEEEE;
box-shadow:3px 3px 3px 2px #797979;
height: 50px;
width: 100px;
padding: 5px;
}
</div>

The same shadow effect can be applied to text as well, with a minor tweak. Instead of using box-shadow, you’ll have to go with the text-shadow property:

<div class="code">
p {
text-shadow: #aaa 2px 2px 2px;
}
</div>

There’s also a gradient property that will allow you to change the background of you website with just a few lines of code and it will also increase the loading time of your webpage:

<div class="code">
#gradient {
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E6C674),color-stop(1, #F7ECCA));
background-image: -moz-linear-gradient(center bottom , #E6C674 0pt, #F7ECCA 100%);
height: 50px;
}
</div>

Now that we’ve given you a basic idea on what the code looks like and how easy it is to create shapes, images and gradients, we’re now going to share some advanced CSS3 features that will really get your head spinning.

The idea of having a 3D rotating cube with webpages on each side, might seem something out of a Sci-Fi movie. Surprisingly, you can create it just with some CSS3 coding and bit of imagination. Below we have a small video on how that would actually look like.

As great as a 3D cube might look like, it’s still only handy for optimizing content and it’s not really that relevant when it comes to creating a photo gallery for example. Again, without the help of any Flash or JavaScript code, you can use CSS3 to create and manage a photo gallery that’s both fashionable and practical at the same time.

All you have to do is use the title attribute, add some random tilts (the rotate attribute), use some image scaling for the hover effect (the scale attribute) and that’s it. In a nutshell, here’s some code example on how you can use them:

ul.polaroids a:after {  content: attr(title); }
ul.polaroids a {
# -webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
ul.polaroids a:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
position: relative;
z-index: 5;
}

If you actually use this code, you’ll get some randomly positioned images, tilted by two degrees, that will be brought in front whenever the mouse pointer hovers an image from the stack. The fashion effect is guaranteed and you don’t have to use any complicated plugins or Flash players.

The idea is that using both CSS3 and HTML5 in a correct manner, you’ll be able to create a fully versatile virtual environment that can be compatible with any internet-friendly device. Not only that this means good business, but it also shows that you’re well on your to setting up the ground base for a Web 2.0 environment.

While scalability and portability are the operative words of the Web 2.0 concept, with the proper usage of these two standardizations you’ll develop and manage websites in a smart and fashionable manner.

If you liked our article or simply want to express your opinion on the matter, please leave a comment in our comment section below, we would be happy to know what you think. And if you want to see what we can do, visit our website at brightpinkstudio.com.

At BrightPink Studio, we design & develop awesome websites, make gorgeous print materials, create logos and other branding items, and more. In our blog, we share news, tips & inspiration - like this article! If you enjoyed it, please share.

namecheap-bannermailchimp_125x125

Latest On Facebook

Quick Tip: When you’re sending a marketing email, use actionable language. Use verbs to inspire readers to take action (download, buy, etc). However, your subject line doesn’t always need to have a verb as long as recipients know what they can do with the information. ... See MoreSee Less

1 day ago  ·  

5 days ago  ·  

Is your logo unique and memorable? Check out Madalina's words of advice about creating a great logo in today's Tuesday Tip. ... See MoreSee Less

1 week ago  ·