Our Awesome Articles

secure-coding-php

Some Useful CSS Tricks and Techniques

During the last weekend I’ve made a few improvements in the website using some great css tricks. The css skills that I currently have are mostly from the internet and a few ebooks. Generally speaking whatever I find interesting I try to make the most of it by learning how it works or trying to develop it even further and I believe that this makes me a self learner. While I was playing around with CSS to make a few changes I’ve discovered some great css tips and tricks through the internet that makes your website lighter and of course more beautiful.

CSS stands for Cascading Style Sheets which makes it a style sheet language used for styling the look of document that it is written in a markup language. We’ve seen Css mostly in web design but as far as I am aware of it can also style any kind of XML document like SVG or XUL. Through css you can customize the plain HTML by adding colors, shapes, and generally playing with the elements. The syntax of this programming language is pretty simple compared with others, it uses mostly english keywords to set the various style properties.

CSS Tricks

1.0 Creating an alert box is certainly good way to attract users’ eyeballs and make sure the users pay enough attention to the important content. Bruce shares his idea how this can be done nicely with some neat CSS code.

css tricks

2.0 The Accordion Effect is becoming a common effects of the Web 2.0 world. We’ve seen a lot how this can be done using JavaScript frameworks but can we do this in CSS? Well the answer is yes. Learn from Rob Glazebrook how this effect can be made by only using CSS.

how to achieve accordion effect with css

3.0 Different stylesheets for differently sized browser windows. Otherwise known as “resolution dependent layouts”. Single website, different CSS files for rearranging a website to take advantage of the size available.

css trick fixing layouts4.0 Center your content vertically. It includes the good and bad for each method along with complete instructions for implementing them. The methods range from using divs that act like tables to using absolute positions.

css tricks

5.0 Polaroid CSS3 Photo Effect. The HTML and CSS aren’t super-complicated, and everything is explained really well. While CSS3 isn’t supported by every browser, this does appear to degrade gracefully, making it perfectly fine to use as long as you don’t mind some visitors not getting the full effect.

polaroid effect css tricks

6.0 Awesome CSS3 Buttons. With a little CSS3 magic, you can created a scalable set of sexy buttons with nearly half the CSS it would have taken with hex colors. Give it a go in your next project and see how it can help add that extra polish you want without huge impact on your code.

css tricks

7.0 Two-color gradients for text using a combination of JavaScript and CSS. It also works to apply shadows and highlights to text. The possibilities for the use of this technique are pretty endless. Of course, this is also one of those things where a little bit goes a long way (ie, limit gradients to your headers, titles, and other text you want to stand out—not your site’s body copy).

css tricks

8.0 Clean & Simple Drop Down Menu. Last but not least a minimal drop down menu which reminds me Apple’s old one.

css tricks and drop down menu

Meet Evan Varsamis


Evan Varsamis is driven by his passion for technology, innovation and vision of an ever improving and informative web. The company he founded, Cloudie Co. is a testament of that. Evan is constantly seeking to invest in new startup projects that support his vision.