Today's Question:  What's your opinion about Alibaba mooncake incident?        GIVE A SHOUT

  WRITE ARTICLE

 CSS


  CSS3 animated dropdown menu

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs.In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.View demoHere’s a quick preview for the CSS3 animated dropdown menu that we’re going to create today:Remember the previous CSS3 dropdown menu? That menu is awesome, and thanks to you is the most popular tutorial around here (at this time).Perhaps the be...

1,860 0 0          ANIMATION CSS3 DROP DOWN MENU ANIMATED MENU


  CSS box-shadow Can Slow Down Scrolling

Working on one of the Chromebooks Google lets you borrow on Virgin America flights, I noticed scrolling down the page on my airbnb.com dashboard was much slower than on my normal laptop. I chalked it up to weak Chromebook hardware, but other sites were scrolling just fine. box-shadow had caused slow scrolling on our search results page before, so I did some investigation.I used Chrome's Timeline tab to see the duration of paint events on the page. Before each test I forced a garbage collection a...

2,230 0 0          CSS PERFORMANCE BOX-SHADOW TIMELINE CHROMEBOOK


  FONT SIZING WITH REM

Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It's just a matter of which less-desirable is most desirable.There are two main techniques that are extolled:Size with pxSize with emLet's review these two approaches before I reveal the magical third.Sizing with pxIn the early days of the web, we used pixels to size our text. It's relia...

5,220 0 0          HTML5 CSS3 FONT FONT SIZE REM


  Create an adaptable website layout with CSS3 media queries

With the rise of both very large screens and mobile devices, web developers have to be able to create websites that display correctly and look good whatever the device is. Sure, you can use good old techniques like fluid layouts, but I’ve got something better to show you today. This tutorial will teach you how you can create an adaptable website layout using CSS3.Getting startedView demo (Horizontally resize your browser to view it in action)Download filesCreating the default layoutThe fi...

1,277 0 0          CSS3 MEDIA MOBILE DEVICE RESIZE PC @MEDI


  CSS3 Animation With jQuery Fallbacks

In today's post, we'll be taking a look at how you can use CSS3 transitions to power your application's animations with jQuery's .animate() method as a fallback where transitions aren't supported. The benefit of transitions is that unlike JavaScript based animations, they're hardware accelerated in certain browsers and mobile devices, resulting in a potentially smoother overall animation than you would normally experience. In a lot of cases your code will work seamlessly with the solut...

2,819 0 0          JAVASCRIPT JQUERY ANIMATION DEMO CSS3


  CSS Rounded Corners In All Browsers (With No Images)

In the past two years, increased browser support has transformed CSS3 from a fringe activity for Safari geeks to a viable option for enterprise level websites. While cross-browser support is often too weak for CSS3 to hold up a site’s main design, front-end developers commonly look to CSS3 solutions for progressive enhancement in their sites. For instance, a developer might add a drop-shadow in Firefox, Safari and Chrome using -moz-box-shadow and -webkit-box-shadow, and then be ...

2,708 0 0          CSS CHROME IE ROUNDED CORNER NO IMAGE FI


  CSS Box Shadow Illustration

Used in casting shadows off block-level elements (like divs)..shadow { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; }The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.The blur r...

4,518 0 0          APPLE CSS BOX SHADOW CHROME SAFARI IE IL


  Stop obsessing over HTML5 and CSS3

As web designers, we all seem obsessed by HTML5 and CSS3 at the moment. Endless posts, tutorials and discussion about them dominate the blogosphere. But how much are we learning that can be applied today? Don’t get me wrong. We all need to understand HTML5 and CSS3. And a lot of it can be used today. My point is that we seem to be spending a disproportionate about of time reading up on the subject when so many other areas deserve our attention. While others are reading yet another tutorial...

2,095 1 0          CLIENTS OPINION WEB DESIGNERS