CSSReflex » CSS http://www.cssreflex.com The CSSReflex blog covers all of Tutorials, Design News, Web Development, Showcases, Freebies, WordPress Tutorials And Blogger Templates. Wed, 08 Sep 2010 02:51:13 +0000 en hourly 1 http://wordpress.org/?v=abc CSS3 – Limelight on New Trendshttp://www.cssreflex.com/2010/07/css3-limelight.html http://www.cssreflex.com/2010/07/css3-limelight.html#comments Mon, 19 Jul 2010 09:55:43 +0000 Buytemplate http://www.cssreflex.com/?p=1246 css3 CSS3 – Limelight on New Trends

CSS3 (Cascading style sheet ) is an advanced version of style sheet programming language for website presentation. The term cascade refers to the specific style of font to be loaded in a page. CSS is written mainly to facilitate the web pages with the presentation which includes separating of the text from one another creating a better and clear view which pay way for categorization of data in a single page with fast access of information.

Presentation of web page included the usage of different optional features of coding so as to show variation in data with layout,color, font, table, .. showing new effects on page to attract users attention.

You may also be interested in one of these older posts
20 Awesome Firefox Add-ons For Web Developers
12 Indispensable Adobe AIR Apps for Web Developers
130+ Free SEO Web Tools and Search Engine Optimization Software
List Of Essential PHP Quick References And CheatSheets
10+ Rare WordPress Theme Options Page Tutorials To Get You Started

New features over the existing:

CSS3 has new improvements over the existing levels of CSS1 and CSS2 bringing different outlook over the web page using the CSS3. Some of the catchy features to be noted which depict well about the CSS3 are…

Box and Text Shadow

Programmers can create a shadow effect over the Box and Texts with the help of Box-shadow and Text-shadow with out using a flash tool.

Custom web fonts

Using the font rule that is @font-face we can make use of any font style out of the options we have while creating a web page.

Layers

Layers are of very effective on their expression of transparency which allows more layered effect of background pictures making the sheet look showy on their appearance with more stuff of expression.

Rounded corner

Corner are made into smooth curved effect instead of the sharp box like effect showing a blunt neat finishing with the help of border-radius rule which can be applied to all four corners of the sheet.

Animation

Animation is made easy in the CSS were web kit-transform is used to spin circle graphics. Which has a best effect when viewed with the Mac Chrome or Safari.

Gradient button

Gradient is cross browser supported Which is much flexible and scalable, a gradient button has more advancements showing variation in text shadow, box shadow, border with rounded corner which can show a shade over the button with the help of gradient color adjustment. A white transparent image is used to give a gradient effect as all the browsers don’t support CSS3 features. Gradient can be shown as light and intensive effects giving pleasant appearance.

Drop down menu

A drop down menu is well suited to the environment once it works with Chrome, Firefox, safari, .. showing a good look on the corners, box effect and text shadow.

Round image

Round image is achieved effective with border radius and box shadow. Round borders and shades on the image gives a pleasant appeal over the image presented in a neat and eye catching look.

Web Browsers to support

A good effect on the usage of the CSS3 is sensed fully with the help of web browsers such as Firefox 3.6+, Chrome, Web-kit,Safari,.. Were the other web browsers does not support the features and improvements of the CSS3…

]]>
http://www.cssreflex.com/2010/07/css3-limelight.html/feed 5
10 Best of Breed CSS Editorshttp://www.cssreflex.com/2010/05/10-best-css-editors.html http://www.cssreflex.com/2010/05/10-best-css-editors.html#comments Fri, 21 May 2010 13:35:21 +0000 James Adams http://www.cssreflex.com/?p=1215 This is a Guest post by James Adams, If you want to contribute feel free to contact me.

Thanks to CSS, we can now define a website’s appearance in a fraction of the time we used to, but why stop there? A good CSS editor can make the entire CSS process even faster, more accurate and…well… just more enjoyable. Most of us use Dreamweaver for all of our CSS editing needs, but it’s expensive and doesn’t offer some of the features you get from cheaper, often free alternatives.

First-rate CSS editors make writing CSS much easier, but that’s not all they’re good for. The vast majority will check your CSS for errors and let you delve into the code associated with your sites and the sites of others. With so many people now using these CSS editors, support it very easy to get hold of. There are loads of inexpensive editors available, so why not give a couple a try? You’ll find a review of the 10 best below.

You may also be interested in one of these older posts
20 Awesome Firefox Add-ons For Web Developers
12 Indispensable Adobe AIR Apps for Web Developers
130+ Free SEO Web Tools and Search Engine Optimization Software
List Of Essential PHP Quick References And CheatSheets
10+ Rare WordPress Theme Options Page Tutorials To Get You Started

1. Notepad++ (free)

notepad++ 10 Best of Breed CSS Editors

Windows users can’t do much better than the free source code editor, Notepad++. Besides a long list of features, which includes auto-completion, syntax highlighting, bookmarking, drag and drop and regular expression search/replace, Notepad++ has been designed to be good to the environment, using as little CPU power as possible. Users can feel smug in the knowledge that their editor is actively reducing their greenhouse gas emissions!

Notepad++ is not just for editing CSS. You can use it for editing C, C++, Java, PHP and a whole host of other programming languages. Its tabbed interface is great, letting you work on several projects simultaneously, and all icons used are instantly recognisable. Furthermore, Notepad++ has been around for a while now, so does not suffer from the bugs which afflict many newer editors.

2. Style Master ($59.99)

Style Master

Style Master, for Mac and Windows, is an editor suitable for beginners and experts alike. Newcomers to coding will find its in-depth tutorials easy to follow and old hands will be impressed with the number of features on offer for analysing and debugging sites.

Such features include MRI, which suggests selectors for any element you click on, and X-ray, which reveals the dimensions, padding, margins and position of any element and works in Safari, Firefox and Internet Explorer. Style Master comes with 20 handy CSS templates for you to use, all of which are perfectly clean and well laid out.

3. Stylizer (free version)

Stylizer

Available for Mac and Windows, Stylizer, from Canadian company Skybound, helps you to create and edit CSS fast. It places a website and stylesheet side-by-side, so that you can see every change you make in real time. No longer, therefore, will you have to rely on writing in a text editor and constantly refreshing a browser window. Its grid-like interface looks superb, is extremely user-friendly and makes CSS errors a thing of the past. Image replacement, clear fixes, positioning and other complex techniques are made much easier for CSS novices.

Stylizer’s strongest features include Bullseye, an inspector which uncovers all the CSS rules affecting any element you click on; Cleanser, which parses and validates any CSS you import; and Two Click Colouring, which helps to simplify the colour picking process. Stylizer is ideal for beginners who want to be able to code without learning the boring basics.

4. PSPad (free)

PSPad

PSPad is a versatile editor for Windows. It’s a small programme, just 3.1MB to download, but carries real weight with many developers. It specialises in syntax highlighting and can deal with a large number of file types. Standard features include templates, search and replace in files, a HEX editor and an integrated free version of the superb CSS Editor, TopStyle Lite, which must be downloaded separately. Even if you’re just looking for a standard text editor, PSPad could be the one for you- its character and word frequency checker is ideal for those writing keyword-based articles.

5. Xyle Scope (free)

Xyle Scope

Cultured Code’s free CSS suite for Mac, Xyle Scope, is a very accomplished and highly recommended programme. Users can run it in Browser Mode, which lets you surf the web in Safari, or Selection Mode, which brings up the HTML and CSS associated with any part of a displayed web page you click on, allowing you to correct annoying CSS errors.

Although primarily designed to let you uncover and investigate code, Xyle Scope can also be used as a CSS editor. It also integrates well with superior, external text editors like BBEdit, TextMate and TextEdit. You can enter CSS yourself or let Xyle Scope help you if you’re a beginner.

6. Stylesheet Maker ($34)

Stylesheet Maker

CoffeeCup’s Stylesheet Maker, Windows only, is a nice and simple CSS editor which lacks some features of more technical rival software, but makes up for it with straightforward design. You can use it to open, edit and save in CSS, HTML and .txt formats, and create CSS for Netscape and Internet Explorer, testing it in multiple browsers. This is really one for beginners only. They’ll love the class and ID wizards which greatly help in creating full-featured CSS with control over text placement, fonts and backgrounds.

7. CSSEdit ($30)

CSSEdit

CSSEdit, by Mac Rabbit, is a highly effective, well structured and pretty cheap CSS editor which you’re bound to enjoy using. Available for Mac only, it’s been designed solely with CSS in mind, unlike some of the other editors in this list. It works perfectly with TextMate (which is a very cost effective combo, by the way) and in harmony with other external programs, like Transmit.

CSSEdit’s packed full of great features, which include Preview, which makes changes to your website in real time (no refreshing) and X-Ray, which shows you exactly where an element is on your page. My favourite feature, however, is Milestones, which lets you fix bugs without the fear of losing work. I recommend you heed the CSSEdit warning: “May cause extremely attractive websites and bouts of validating code. Use with care.”

8. JEdit (free)

JEdit

While novices will find Stylizer and CSSEdit much easier to get to grips with, JEdit, for Windows, Mac and Unix, is one for the experts. Developers can use it to edit, auto indent and syntax highlight over 130 languages.

What separates JEdit from other editors is the 150 or so plugins available, which have been released over the past 12 years since it was first created. These include spell checker using Aspell, text auto-complete and the XML plugin that’s needed for editing CSS, as well as XML, HTML and JavaScript. Besides plugins, you can customise with macros to create your ideal editing environment.

9. Style Studio ($49.99)

Style Studio

Style Studio CSS Editor, for Windows, has been designed to make CSS quick and easy to write and implement. Drag and drop, auto-replace and custom hotkeys for code snippets reduce your CSS struggle. Its inbuilt CSS validator makes sure that your CSS is clean and error-free every time as it automatically pinpoints problems. Its Browser Filter detects the browser your visitors are using, adjusting the CSS accordingly so your site’s always looking at its best. Windows users will feel instantly at home using Style Studio as it has been closely modelled on MS Office 2000 and XP.

10. Rapid CSS 2010 (€ 29.85)

Rapid CSS

Rapid CSS 2010, from Blumentals Software, is a popular CSS editor which can save you lots of time and effort. Beginners will appreciate the fact that they can get Rapid CSS to write CSS for them, rather than inputting it manually, and everyone will love its CSS Checker and Validator, similar to that of Style Studio, which allows you to instantly target and fix problems. Rapid CSS is also integrated with CSE HTML Validator for extra safety.

Besides the CSS Checker, other extremely handy features in this Windows only editor include the multi item clipboard, X-Ray (similar to CSS Edit), search and replace in files, CSS code compressor, built-in CSS reference and CSS inspector, which adds, removes and modifies CSS properties without the need for property names.

]]>
http://www.cssreflex.com/2010/05/10-best-css-editors.html/feed 40
Five Cool XHTML & CSS Video Tutorialshttp://www.cssreflex.com/2009/05/some-helpful-xhtml-css-video-tutorials.html http://www.cssreflex.com/2009/05/some-helpful-xhtml-css-video-tutorials.html#comments Sun, 17 May 2009 19:33:16 +0000 Naeem Noor http://www.cssreflex.com/?p=299 Here is a list of helpful xhtml and css video tutorials which i found around the web.

hethanadam understand 195x155 Five Cool XHTML & CSS Video TutorialsUnderstanding Divs, Css, and How They Work Together by Ethan and Adam

If you are new to XHTML, you should not miss this video. This video will help you understand how DIVs and CSS work together. The tutorial work on Dreamweaver and with this, it’s more easier to follow what the author was doing. In this website, you can find other videos, maybe useful for anyone who is beginner with CSS, Web layout in PTS…
Watch the Video

tutvid fully css 195x155 Five Cool XHTML & CSS Video TutorialsCreate a Fully CSS Website Layout by Nathaniel

The most famous people in Youtube about posting Design Tutorial Videos. In this video, you will see how to design a complete basic website layout with css, learn all about using divs, creating CSS rules, targeting divs, creating a background, and so much more! And there are other videos in his website helpful for designer. Check it all!
Watch the Video

csstipsandtricks completed css 195x112 Five Cool XHTML & CSS Video TutorialsCSS Tips & Tricks series by Stephen Korecky

Not a big collection but this series is helpful for you, who want to learn CSS  Tips and Tricks that users on over the internet are doing. This series contains 8 episodes and maybe continue to update.
Watch the Video Series

nettus psd2xhtml 195x152 Five Cool XHTML & CSS Video TutorialsHow to Convert a PSD to XHTML by Jeffrey Way

This video is a complete tutorial from PSD slicing and CSS styling… You can see how he did this video with PST, Visual Studio … He said this movie will shows you exactly how to convert a PSD into perfect XHTML/CSS. Yes, i think so.

Watch the Video

css tricks psd2xhtml 195x150 Five Cool XHTML & CSS Video TutorialsConverting a Photoshop Mockup by Chris Coyier

The video below is a part two of series made by Chris Coyier after lots of great feedbacks he received with part one right here. Because of part one is just 10 minutes lenght, he did the part two and in the great video he did, he show you everything, exactly how he created the CSS-Trick layout, but it’s just a mini-version of the current version of CSS-Tricks.
Watch the Video

]]>
http://www.cssreflex.com/2009/05/some-helpful-xhtml-css-video-tutorials.html/feed 8
Increase Your Backlinkshttp://www.cssreflex.com/2009/01/increase-your-backlinks.html http://www.cssreflex.com/2009/01/increase-your-backlinks.html#comments Sun, 25 Jan 2009 09:05:00 +0000 Naeem Noor http://www.wallheaven.com/cssreflex/?p=14 Increase Your Backlinks
Does Anyone want to increase their number of backlinks on Technorati? If so, then join the movement on MoneyBush and watch your blog grow with us.

*–Copy Here – Technorati Authority–*

  1. Make Money Online | Money Blogging Tips
  2. Find Torrent Search Engine
  3. Indo Contest
  4. Mga Kwentong Ma Alamat
  5. Contest Love
  6. It Blood
  7. I Heart Contest
  8. Nurse Jen Doll
  9. Your Web and Graphics Design
  10. My Blog Contest
  11. Prize King Contest Blog
  12. Computer Collections
  13. Medan Blogger
  14. Eiffel Tower
  15. Programming the Life
  16. John Doro Dot Com
  17. Paco Contest
  18. Couch Surfing Host
  19. Erick’s Blog
  20. My Life 4 Hire
  21. The Spirit of Blogging
  22. EmTNester
  23. Amori, poesi, arte, chat
  24. Great Wall of China
  25. The Painted Veil
  26. FeeFiFoto Blog
  27. I am Harriet
  28. Phoenix2Life
  29. Anurag Bhateja
  30. Online Treasure
  31. Gorilla Sushi
  32. London Eater
  33. News n’ Tech Palace
  34. Sherry Rambling
  35. Blogging Tips and Tools
  36. Selbst Management
  37. Skip Ratt
  38. Eljon
  39. Heart Net
  40. Just 4 You
  41. Widgets For Free
  42. Bubble Crush
  43. GoGalavanting
  44. Mesothelioma Cancer Help
  45. How Things Do
  46. Hardware Rig
  47. Reality View
  48. Utah Web Design
  49. Hero Help Tutorials
  50. Nub Lag Teh Server
  51. Jobs Human Resources
  52. Naeem’s Blog – Web Designing Resources

See the original post where you can sign up at MoneyBush.blogspot.com


Don’t forget to promote this article via social networking and word of mouth.. It only means better results for yourself and everyone on the list.

*–End Copy – Get Pasting! –*

]]>
http://www.cssreflex.com/2009/01/increase-your-backlinks.html/feed 6
Typechart – Browse Web Type, Grab CSS.http://www.cssreflex.com/2009/01/typechart-browse-web-type-grab-css.html http://www.cssreflex.com/2009/01/typechart-browse-web-type-grab-css.html#comments Sat, 24 Jan 2009 10:24:00 +0000 Naeem Noor http://www.wallheaven.com/cssreflex/?p=13 Are you web designer, or web developer and you dont have a MAC ?, well this would be more interesting for you than anyone else. Typechart lets you flip through, preview and compare web typography while retrieving the CSS. This is all about web typograhpy, within typechart you can easily compare and preview hows fonts rendered in both MAC & PC, and even Grab the CSS.

typechart Typechart   Browse Web Type, Grab CSS.

check it out here, Typechart

]]>
http://www.cssreflex.com/2009/01/typechart-browse-web-type-grab-css.html/feed 1
Edit WordPress themes with Dreamweaverhttp://www.cssreflex.com/2009/01/edit-wordpress-themes-with-dreamweaver.html http://www.cssreflex.com/2009/01/edit-wordpress-themes-with-dreamweaver.html#comments Sat, 24 Jan 2009 07:10:00 +0000 Naeem Noor http://www.wallheaven.com/cssreflex/?p=11 themedreamer1 Edit Wordpress themes with DreamweaverThemeDreamer is a very cool Dreamweaver extension that allows you to easily customize or build WordPress themes in Dreamweaver. It works by compiling the individual theme files into a single WYSIWYG theme in design view. You can then edit the WordPress theme code as if you were editing your live blog!

ThemeDreamer simulates live blog post data, so you can style the CSS right in Dreamweaver’s design view. Once you have made your changes, simply upload your new theme files your new blog is live! ThemeDreamer allows you to utilize the full power of Dreamweaver on your WordPress theme design!

For more information, visit the ThemeDreamer website.

]]>
http://www.cssreflex.com/2009/01/edit-wordpress-themes-with-dreamweaver.html/feed 2
TOP CSS Cheatsheetshttp://www.cssreflex.com/2008/12/top-css-cheatsheets.html http://www.cssreflex.com/2008/12/top-css-cheatsheets.html#comments Tue, 23 Dec 2008 09:06:00 +0000 Naeem Noor http://www.wallheaven.com/cssreflex/?p=7 Printable CSS cheat sheets
all in PDF Format

1. CSS Cheat Sheet

CSS Cheat Sheet - screen shot.

PDF

2. CSS Cheat Sheet (V2) by Addedbytes

CSS Cheat Sheet (V2) - screen shot.

PDF

3. CSS Shorthand Cheat Sheet

CSS Shorthand Cheat Sheet - screen shot.

PDF

4. CSS Level 1 Quick Reference – PDF

CSS Level 1 Quick Reference - screen shot.

PDF

5. CSS Level 2 Quick Reference

CSS Level 2 Quick Reference - screen shot.

PDF

6. CSS2.1 Quick Reference Card

CSS2.1 Quick Reference Card - screen shot.

PDF

7. CSS2 Reference Guide

CSS2 Reference Guide - screen shot.

PDF

]]>
http://www.cssreflex.com/2008/12/top-css-cheatsheets.html/feed 7