Placed in: Home
Delivering responsive images with Drupal

About the author:
Garry Smith is a seasoned writer that is professionally dedicated to CSS Chopper, a premier web development and outsourcing company. The organization is fortified with qualified developers for Magento, e-commerce technologies etc. to render outstanding business solutions.

For most web developers, delivering the images to the low-bandwidth mobile devices could not be less than any brain teaser, where they feel like they have been stuck in a complex task, just like searching a needle in the dry haystack!

Well, it could screw-up the brain! Even the developers, who are well-acquainted with responsive web design techniques, know that by setting the max-width of the images up to 100%, can't resolve this issue as the server will still render big size image to the user's phone. The mobile optimized web applications are designed to run smoothly for the low bandwidth connection with formatting according to the screen of the device.

Delivering responsive images with Drupal

So with this blog, I intend to alleviate your pain involved in the job of providing responsive images with Drupal CMS. The blog offers sheer guidance for devs, where they can obtain the detailed information of the procedures explained with the help of useful images. Read the blog as it provides a solution for having Drupal website for bandwidth starved mobile devices.


Tags:  drupal responsive images guest post
 
CSS animated profile cards

Whoah, been a while since I've posted something! Yet, I wanted to mess around with some fun CSS3 stuff and wanted to share the results with you. Today, we're going to create CSS animated profile cards. Although there are four different kind or animations (Push, Slide, 3D Flip and Explode), they all share the same kind of HTML structure. Simply hover over the images to see the contact details.

CSS animated profile cards

The pictures used are created by Belovodchenko Anton, but their profile data is fake. -prefix-free has been used to remove the vendor prefixes in CSS. All animations are done with the help of the transition property.

Demo CSS animated profile cards   Download CSS animated profile cards

So, how can you create this effect for yourself? Let's dive into the code, explaining the parts one at the time.


Tags:  profile cards css3 animation
 
Fronteers 2012 - Notes and more

If you are following me on Twitter, you might have been spammed seen loads of Tweets last week with the #fronteers12 hashtag. This was because of the fact I was attending the Fronteers Conference, where loads of interesting talks were held.

Places like these are also great for meeting and talking to people. I talked to a couple of them (like @mathias, @mikevhoenselaar, @leaverou, @eising and @smashingmag) who I only knew from "the online world", but it can be pretty inspirational to talk to them in person as well.

Fronteers 2012

With this post, I wanted to share a couple of interesting tweets, ideas, notes etc. from the conference. If you find these interesting, I do recommend you to watch the video recordings taken at the event, which will be published somewhere next week already.

I want to thank Info Support (my employer) to let me attend the event, but especially Fronteers for hosting it. Also, a big up for Christian Heilmann who was the "MC" during the conference and did a great job (especially at the Q&A).


Tags:  fronteers conference notes tips
 
Giveaway contest - Digital copies of "The Best 365 Websites Around the World"

A book with the title The Best 365 Websites Around the World, who doesn't want to read that? Awwwards wrote this book and this week, we're giving away 5 digital copies. The book contains great content, which will give you loads of inspiration.

Awwwards Book

Read the rules below to find out how you can join this contest: it's pretty simple! Make sure you join this contest quick, since it ends on May 21st. You'll automatically receive information if you have won a prize. Good luck to everyone!

Also, make sure you subscribe to the RSS feed or follow me on Twitter to get updates on more future giveaways.


Tags:  prize giveaway contest awwwards
 
CSS3 quickie: The Facebook loading animation

After the couple of jQuery Quickies that have been placed online on this website, I today present you a CSS3 quickie. Just a short walkthrough to create a simple effect, to learn some basic stuff. In this case, we're recreating the Facebook loading animation using CSS3 animations. I'm pretty sure that you've seen the animation before, if you're a Facebook user.

Facebook loading animation

We're using CSS3 keyframes to create the desired effect. We'll be using prefix free from @LeaVerou to use unprefixed CSS3 properties.

Demo Facebook loading animation   Download Facebook loading animation

Take note this example only works properly in browser that support the keyframes property. I've tested this script and verified that it's working in the latest versions of Firefox, Chrome and Safari.


Tags:  facebook css3 animation keyframes simple
 
<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>

Results 1 - 15 of 355
Subscribe

Subscribe to Marcofolio