Useful tool for web designer. CSS Arrow Please! is a nice and simple tool for generate a CSS box code with arrow and no image used. You can put the arrow on the top, down, left or right of the box and adjust color and size easily.
Link: CSS Arrow Please!
0 Comment » Nice tool for web designers to save time coding CSS. CSS3PS is a free Photoshop plugin that helps us convert shapes that we designed with Photoshop to CSS3 code.
You can create shapes with stroke, border radius, drop shadow, inner glow, outer glow, inner shadow and add gradient overlay to your shape, then the plugin will generate the CSS3 code for you.
This plugin work with Windows or Mac OS X and Photoshop CS3 and later. You can download CSS3PS at no cost.
The video tutorial about CSS position by Chris Coyier from Css-Tricks. This tutorial will show you the overview of CSS position values, if you’re new to CSS or want to learn more about this topic I think this video is right for you.
This is a quick beginner-level overview of the different CSS position values. In a nutshell: relative allows you to “nudge” and leaves the element’s original position in the page flow. Absolute and fixed allow for exact placement of elements and remove them from the page flow. Fixed positioned elements are unaffected by scrolling. All of them set a new positioning context and allow z-index to work.
Many web designers add shadow to content box to make it more stand out and also look good. If you’d like to have it on your site, I found a tutorial on how to create nice box shadows using CSS3.
The tutorial about CSS3 that I found will show you the sample CSS3 code for creating CSS3 content box shadows in 8 different styles use only CSS without image. Hit the link below for the tutorial or view the demo.
Link: Creating Different CSS3 Box Shadows Effects
View Demo
If you’re looking to learn how to create a website or blog, CSS is the way to go. This is a nice and free CSS video tutorial series I found on Youtube, you’ll learn the fundamentals of CSS sush as selector, styling link color, styling font, learn how to use div tag, creating CSS menu, box sizing, opacity, position, creating CSS button, before and after pseudo elements and more…
Learning from video tutorial helps you learn fast. The videos are good quality, you can view at HD 720p and the tutor is phpacademy whom is qiute well known and he is a good tutor too.
Here is the sample first 2 video tutorials from the series
CSS Tutorials: Introduction & The Basics
CSS3 is widely used and I found more and more cool stuffs on the webs that created with CSS3. This one is a nice tooltip that was created with pure CSS3 using CSS transitions and the pseudo-classes :before and :after.
This is the nice tutorial that I found on Codrops and I’d like to share with you. In the tutorial, you’ll learn how to create some simple, animated tooltips using CSS. I think it’s really cool and useful.
You can apply the this CSS3 effects to your web design work and you can download the source code too.
Link: Creating Animated CSS3 Tooltips
So, you want to create a website? This is a playlist that I found on Youtube on the topic “XHTML and CSS Video Tutorials”. The videos teach you from beginner level to intermediate level. These are good XHTML and CSS Video Tutorials, take some time to learn.
XHTML and CSS Tutorial – 2 – Creating our First Webpage
Link : Watch More on Youtube.
[ad#250square]You may have seen the loading indicator in many sites these day. If you want to have it on your site and you don’t know how to create one you can go to CSSload.net and create one for you own.
CSSload is an online tool, easy to use and it work great, currently, this tool offers 8 styles of loading indicator using pure CSS3 code.
Link : CSSload.net
[ad#250square]Less is a new way to code CSS. Less is the dynamic stylesheet language that getting more and more popular among the web coders. If you’re looking for a better way to code CSS you can check it out at lessees.org
SimpleLess is a tool that help you generate CSS file. Whether you’re a designer or a hardcore programmer, SimpLESS is perfect for you. It compiles your *.less files into valid CSS.
SimpLESS is available for free download in all major platform, Windows, Mac and Linux.
Link : SimpLESS
Cool app for CSS developers who use iPhone or Android phone. If you’re new to CSS or you code CSS for long time but you need a good CSS reference, you should have this app on you phone.
CSS reference is an app that shows you about CSS properties, including syntax, examples and browser limitations. A reference for CSS properties and selectors including syntax, examples and limitations for CSS1 and CSS2 properties. Includes visual examples for border-style, cursor, font-style, font-variant, font-weight, text-decoration and text-transform properties.
CSS reference is available free on the App store and Android market.
