Archive for the ‘CSS3’ Category:
Fresh Web Designer Tools and Resources
For today’s design news we have highlighted some fresh tools and resources for all you web and app designers out there. There are a couple of tools to help with any CSS3 and HTML5 development issues you may have, there is a marvelous new technique for styling buttons, and finally, and perhaps the coolest of all,some time saving iPad actions for Photoshop.
BonBon Buttons – Sweet CSS3 buttons
These sexy looking flexible CSS3 buttons have been styled with the most minimalistic markup as possible.
BonBon Buttons – Sweet CSS3 buttons
iPad Actions for Photoshop
These Photoshop Actions will allow any UX/UI designer or App developer to quickly create a gorgeous rendering of their app as it would appear on an Apple iPad. All that is required on your end is your final designs (and a copy of Photoshop, obviously).
iPad Actions for Photoshop
Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8
selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.
Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8
HTML5/CSS3 Cheatsheet
Here are some simple cut-and-paste examples of HTML5/CSS3 features that are currently (mid-2010) usable across a number of web browsers, chief among them Firefox, Safari, Chrome and Opera.
HTML5/CSS3 Cheatsheet
By Paul Andrew (Speckyboyand speckyboy@twitter).
Sweet CSS3 Buttons – BonBon
Using the new features and flexibility CSS3 offers, designers keep coming with impressive outputs.
One of them is BonBon Buttons: attractive buttons that will possibly attract the Web 2.0-type design fans the most.
A single PNG image is used to give the noise effect and they have a shiny 3D-like look.
There is also a method provided for inserting Unicode Symbols inside buttons with the help of HTML5 custom data attributes.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Related posts
Three Kick-Ass Web Developer Tutorials
Sometimes to get your development juices flowing you just need a meaty project or an in-depth tutorial that you can sink your teeth into and lose yourself for a few hours in coding bliss. And that’s what we have for you today, three tutorials that will satisfy your code craving! They are not only roll-up-your-sleeves and put-on-a-pot-of-coffee good but they will also introduce you to some of the latest CSS3, HTML5 and jQuery techniques.
A jQuery, CSS3 & HTML5 Hover-Based Interface
In this awesome tutorial you will learn how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. The project you’ll be creating could easily be used for a portfolio or business site and the concepts you’ll learn could certainly be used to expand the idea further.
A jQuery, CSS3 & HTML5 Hover-Based Interface
Dynamic FAQ Section w/ jQuery, YQL & Google Docs
In this tutorial, you will build a dynamic FAQ section. The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers.
Dynamic FAQ Section w/ jQuery, YQL & Google Docs
How to easily create charts using jQuery and HTML5
For years, Flash was the only solution to display a dynamic chart on a website. But thanks to modern techniques, the dying Flash isn't needed anymore. In this tutorial,you'll be shown how easy it is to transform a basic HTML table into a profesionnal looking chart using visualize.js, a very useful jQuery plugin.
How to easily create charts using jQuery and HTML5
By Paul Andrew (Speckyboyand speckyboy@twitter).
HTML5Rocks: HTML5-CSS3 Resource By Google
HTML5Rocks is an online resource by Google that regularly shares various resources on HTML5 and CSS3.
The site has very detailed tutorials that digg stuff like HTML5 video or @web-fonts which are good starting points on the subjects.
An online playground with shortcuts to JS APIs + HTML-CSS properties helps trying new codes and seeing the outputs instantly.
And there is HTML5 Studio, which is a showcase of HTML5 codes like page-flip, video player, carousel, geolocation and more that are open source. It is possible to get inspired from them or re-use them in our projects.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Related posts
Experiment CSS3 Properties Easily With CSS3 Playground
Mike Plate, a freelance web and mobile developer, has created an impressive CSS3 Playground to help seeing the properties in action easily.
The web application enables you to style a box with a text (that can be resized and re-positioned) with the help of sliders and color-pickers.
Once the properties (like radius, box-shadow, CSS3 transforms, etc.) are updated the result is displayed instantly with the CSS code generated.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Related posts
HTML5 Boilerplate: A Default HTML/CSS/JS Template For Any Project
Few days ago, a post at WRD was mentioning HTML5 Reset. And, here is a new option:
HTML5 Boilerplate is a HTML/CSS/JS default template (starting point) which helps the website to-be-built work cross-browser, support HTML5-CSS3 and work fast.
The template comes with various performance optimizations and optional features like cross-domain Ajax and Fash.
An .htaccess config file includes caching rules and prepares the website to serve HTML5 video, use @font-face, and enable gzip.
It is also built with mobile browsers taken into consideration and has an iOS, Android, Opera Mobile-adaptable markup + CSS skeleton.
HTML5 Boilerplate offers many other features like an optimal print stylesheet, a test suit for unit tests and much more.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Related posts
HTML5 Reset – A Base For HTML5-CSS3 Projects
While starting a web project, we usually use a set of resources like CSS-reset, various JS hacks for IE, etc. to overcome browser incompability issues.
HTML5 Reset is a project which aims to offer a base for the HTML5-CSS3 projects which covers these issues by default.
Besides the standard HTML tags, it has rules to reset the new tags like title, header, footer and JavaScript-powered fixes for IE.
The set comes in 2 versions:
- Bare Bones (stripped down to the essentials)
- Kitchen Sink (when we want the option to remove features, rather than add them)
Inside the download package, there is also a sample content provided to help you get started.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Related posts
Aloha Editor, CSS3 Pie, FontFonter – Impressive Fresh Tools
It is always impressive how many useful and free web apps and tools there are for web designers, and today’s fresh selection is just that – very impressive. The Aloha Editor is especially impressive, with its unique live editing features. And there is also CSS3 Pie which will make all CSS3 properties viewable in all versions of IE (it really does!). If you have the time we recommend you take a look at these tools.
Aloha Editor – The HTML5 Editor
Aloha Editor allows you to edit content you would never imagine you can. It is the world's first full featured Editor that allows you to edit dynamic content live and in place.
Aloha Editor – The HTML5 Editor
1dl.us – Your all-in-one tool site
1dl.us is a useful all-in-one resource, that feature URL shortening, Upload Pics, Pastebin and a Password utility.
1dl.us – Your all-in-one tool site
CSS3 PIE: CSS3 decorations for IE
PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
CSS3 PIE: CSS3 decorations for IE
FontFonter
FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web FontFonts.
FontFonter
By Paul Andrew (Speckyboyand speckyboy@twitter).
CSS Techniques I Dreamed About When I Started….
When I was first introduced to CSS, my mind exploded with possibilities that CSS created, which lead to thoughts of what it could provide me as a web designer. CSS provided the bridge between web designers and web developers. We have all seen situations where a developer created almost the perfect website, yet it didn’t have the appeal that a good front end designer could present. Now with CSS, you could have both in a seamless creation of perfection.
I imagined where designers might discover easier ways to code, and developers would find easier ways to design, to the point where they would become synonymous with one another. I dreamed of ways that cumbersome HTML coding could be replaced with efficient and quick CSS code allowing cleaner, yet more stylistic website pages.
Web developer gurus have traditionally used PHP, JavaScript and Ruby as the languages they regularly use. Now there are some folks that are simply taking PSD and converting it to XHTML and CSS, and proudly declaring themselves web developers.
Not all dreams are good dreams. One of the fears I had is there would be designers and developers over using CSS variables and constants as found in PHP, to the point where they re actually making their style sheets longer. They also face the problem of being able to write their code that can be easily understood when reading it. As long as designers and developers make sure they are always efficient in writing their code and knowing when to use CSS variables, or when they should be using selectors.
I liked being able to use CSS to define colors as word-colors like blue, yellow, green and such. But then I noticed that during W3C validation, it would produce error warnings. W3C ants every color defines by numbers. Normally that isn’t a problem, however if you are designing a page that has extensive colors and shadings, it becomes difficult to remember what each code represents. It is very difficult to track. However, if you write your code as below, it is then a simple matter of reading your code if you need to make a change.
- $tan = “B7722D”
- $cream = “F5C350”
- $menuUp = “E9AB54”, // lite tan
- $menuDown = 473729”, // dark gray
SEO optimization is being discussed on everywhere, from individuals to design studios soliciting customers, and most of them skip over CSS as a simple and free solution. There are actually several websites that offer CSS Optimization tools. Some of them are relatively easy to use, and there are those that are fairly complex and harder to use. Most of them produce incredible results. Basically what they do is compress CSS files to allow them to load quicker, by merging similar classes, removing useless properties and whitespace, etc., will make some of the code harder for you to read. However, with larger CSS files it can condense the file that it really makes a difference in page loading times.
Even if it only saved 10% of the standard loading time, that alone would be significant over a course of a month or a year. Any time savings is beneficial considering there is a good chance of saving a viewer from leaving the site and going else where on the net. It is recommended that the designer or developer always keep a copy of the readable CSS code so that if they ever needed to make any changes it could be done quickly and easily to find what you need to change, and then it can be re-optimized.
Many broadband users might not think this matters much, as most websites seem to load fast for them, but if each site you went to loaded even 10% faster, think of all the time it could save you over the course of a week, a month or even a year. The bandwidth savings for the website operator can also be immense. I would recommend that you always keep a copy of your human readable CSS code so that if you ever need to make any changes it does not take you a long time to figure out what you need to change, and then you can re-optimize it.
The CSS optimizer that appears to be best is “Icey’s CSS Compressor” which out performed all of the others, with the added benefit of displaying the compressed code in color making it easier to see the changes that had been done.
All in all, CSS is here to stay, and is actually only limited by our dreams. CSS can be what you want it to be, or it can be something you want to avoid. However, that would be your loss. If you are new to CSS, read and experiment with it all you can, so it is truly an amazing tool for website creation and esthetics simplification.
CSS3-Enable Internet Explorer With PIE
PIE (Progressive Internet Explorer) is an IE attached behavior (.htc file) that enables Internet Explorer 6-8 to recognize and display a number of CSS3 properties.
There is almost no difference in coding for the CSS properties. It doesn't require any vendor prefixes (like border-radius rather than -moz-border-radius).
It is simply attached to an element in the CSS file like: behavior: url(PIE.htc); and adds support (full or partial) for the following CSS3 features:
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image
And, the missing CSS3 properties are under development.
Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets
Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)