background preloader

HTML and CSS

Facebook Twitter

9 Amazing CSS Rules that Save Designers and Developers. A web designer certainly has to memorize a lot of stuff related to his work. Talking about CSS, it has many declarations that can enable you to transform the design of your website and open up more possibilities which are harder to take care of while using the conventional techniques. Here are some of the tips or in other words declarations available in CSS which all designers must know: 1- Rounded Corners In today’s web folio, websites are adopting the latest development technologies. HTML5 and CSS are used to build up to dated scripts. border-radius is used to make the borders go round for HTML elements and is supported by latest versions of all browsers.

Advertisement We can also use the combined version or shorthand of above code like below. To avoid browser compatibility issue, make sure to declare them separately. 2- Drop Shadow Another interesting feature that CSS3 offers is the drop shadow features. box-shadow is the property used to give drop shadow effect (inner and outer). 7 Essential CSS3 Tutorials For Web Developers. Advertisement CSS3 has got a massive potential to create very elaborate and complex details by strictly using CSS and no images. It can carry out a lot of functions as it is based on motion techniques. Many designers all over the world believe that CSS3 is a technique which has unbelievable potentiality which will be used to create wonderful designs in the years to come. Today showcase consists of fresh development concepts that being developed in 2012.

CSS Buttons with Pseudo-elements(Demo or Download ) In this tutorial, how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. Slopy Elements with CSS3(Demo or Download) It’s always a delight to see some non-straight elements in web design. Animated Web Banners With CSS3(Demo or Download) You can learn web banners, ads or any content for that matter, with CSS3 animations.

CSS3 Lightbox (Demo or Download) In this tutorials, you can learn neat lightbox effect using only CSS. More CSS Secrets Another 10 things you may not know about CSS.

Validation

CSS3 Generators. All you need to know about CSS Transitions. CSS3 transitions bring simple and elegant animations to web applications, but there’s a lot more to the spec than first meets the eye. In this post I’m going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions. Letting the browser control animations sequences allows it to optimize performance and efficiency by altering the frame rate, minimizing paints and offloading some of the work to the GPU. Browser support CSS transitions are supported in practically every version of Firefox, Safari and Chrome.

They’re supported in IE 10 and onwards. If CSS animations aren’t supported in a given browser, than the properties will be applied instantly, gracefully degrading. Webkit based browsers (Safari and Chrome), still require -webkit prefixes for animations and gradients, but these are soon being removed. Applying transitions A simple way of applying transitions is with CSS pseudo-classes, such as :hover.

An Advanced Guide to HTML & CSS. How To Work With Linear, Radial, And Repeating CSS Gradients. Any time you can replace a bitmapped image with code you should. The code is going to weigh less and be more maintainable. That’s not to say we shouldn’t use bitmapped images, but where appropriate go with the code instead. A few years ago designers would create large images of a solid color.

I never did understand why given that a single line of code would do the same thing. While they’ve been with us for a couple of years now, I’ve only recently started using css gradients in the sites I build. As a reminder to use them more I though I’d write about them here. Browser Support Since I’m saying we should use css gradients more, I should probably back that up with some data. As with a lot of css, IE is a potential stumbling block as there’s no support in IE9 and below. You might argue that suggests we should wait a bit longer, but there should never be a time where the inability to display a gradient breaks your design. How to Work with Gradients There are 4 types of gradients. Summary. How Does Auto Positioning Work In CSS? A few weeks ago Andrei raised an interesting question on one of my older posts.

The post shows how to create a navigation bar. Andrei noticed the submenu was positioned absolutely, but none of its ancestor elements had positioning applied. Why then did the submenu display directly below its parent link in the menu? I honestly didn’t know. Like Andrei my expectation was the submenu should be positioned relative to the html element given the absence of other positioned elements and should appear in the top left corner of the browser, but it didn’t.

The reason turned out to be very simple, though it took some investigation to find it. Containing Blocks Set Positioning Context As a quick review when you use css positioning on an element its position is relative to some containing block. In the post I was using the Suckerfish system to create a drop down menu. At first glance the submenu seems to be ignoring the above information about containing blocks. How Should a Browser Interpret Auto? Collection of Useful Open Source CSS Resources. There are loads of free scripts to download and include in your website projects. Developers are constantly releasing their work under open source General Public Licenses. This allows other developers to work off the same code and even customize pieces to better suit their project’s needs. Overall the majority of codes you’ll find these days are written in JavaScript or backend languages. But I will say there are some newer CSS libraries and resources which are extremely beneficial to most frontend developers.

In the article below I have put together a set of very handy tools, resources, and code libraries for web developers. All the codes are written in CSS-only and should not require any JavaScript to function. This is a nice mindset to build around your website since not all users will browse the internet with support for JavaScript. 1. IVORY is a frontend CSS framework for building responsive grids in web design.

Visit Website → 2. Visit Website → 3. Visit Website → 4. Visit Website → Five things you can do to make HTML5 perform better. Friday, January 25th, 2013 at 5:33 pm During the last few weeks we were busy helping developers to convert their HTML5 apps from platforms like WebOS and ChromeOS to FirefoxOS and the target hardware this operation system is right now aiming for. As these are slow mobiles, we found that quite some tweaking had to be done. The reason was in most cases libraries using outdated ways to animate and position things on the screen. These old ways of working are needed to support legacy browsers and in a lot of cases are not needed as these legacy browsers will never see the apps in the first place.

Aside: I will cover a lot of this in my keynote at the jQuery Europe conference called “Helping or hurting?”. Tip 1: Use CSS animations/transitions Instead of using your library’s animate() which – for now – uses many badly performing technologies (setTimeout, top/left positioning) use CSS animations. Tip 2: Use requestAnimationFrame() instead of setInterval() Again the reason is hardware acceleration. Dig deep into CSS gradients.