Pure CSS double and triple borders

G'Day, Everyday we learn something and everyday we practise "Experiments". I do that sort of stuff for fun all the time. This is sort of my favourite past time. Anyways as I am still doing some experiments with pseodu elements I thought I should give you this cool CSS trick that you can use safely in all major browsers lets take a look at the CSS first The CSS for Double borders [geshi lang="css" nums="1" target="_self" ] [crayon-600278ccf18e0212490430/] The Markup [crayon-600278ccf18e8080394762/] [crayon-600278ccf18eb766135471/] [crayon-600278ccf18ed482947758/] [crayon-600278ccf18ef694032945/] [crayon-600278ccf18f0998067761/] Demo http://jaspreetchahal.org/examples/css-examples/double-css-borders.html Result lets now add one more border line to our above div No need to change the markup but instead use the CSS below The CSS for Triple borders [geshi lang="css" nums="1" target="_self" ] [crayon-600278ccf18f2989078316/] Demo http://jaspreetchahal.org/examples/css-examples/triple-css-borders.html Result So our result now will look like this Important thing in above piece of CSS is element padding to give enough room for our borders. I hope this was an exciting read for you. Cheers Advertisement       … [Read more...]

Pure CSS Square brackets

Hello, This is just a quick thing I did while learning CSS pseudo elements :after and :before I thought I should share it with my blog readers because I thought it could be worth sharing Well not very complex or very attractive but this could give you a hint if you are trying to create square brackets purely in CSS or are trying to do something cool with :after and :before pseudo elements of CSS. Lets check what I got in store for you. Lets check the CSS first. The CSS [geshi lang="css" nums="1" target="_self" ] [crayon-600278ccf3dee468252505/] The Markup [geshi lang="html5" nums="1" target="_self" ] [crayon-600278ccf3df3977673895/] Its pretty straightforward HTML. Lets now check the result when we launch our webpage the brackets will appear.   The Result Now add a new property called border radius in :after and :before element styles [crayon-600278ccf3df5855906877/] The Result Above is ok I would thought and pretty easy to implement as well but will only work for SINGLE lines. A more robust solution will be something like this Updated CSS [geshi lang="css" nums="1" target="_self" ]   [crayon-600278ccf3dfb037233067/] Now this will work if you want to wrap your text within square brackets. Don't forget to change the width to suit your need. The Result You can play around to see if you can come up with something other than what I've done. :after and :before pseudo elements are explained in length in the articles below http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/   I hope this helps Cheers Advertisement             … [Read more...]

Real Estate Listing banner Images and CSS

Hi Guys, While I was browsing a realestate site I came across something that I think was really good. A Cool identifier to mark listings as one of the below mentioned statuses. Leased Off Market For Lease Selling Now Sold Under Contract So I thought I should make some markers that could be useful for few. Below is the artwork I worked on and is available under open license. You can use the images for FREE on both Commercial or Non-Commercial sites if you like. My motive is to show how you can place these onto your DIV so it all looks nice and clean. Adobe Illustrator Vector file can be downloaded at the end of this post (registration required) For Lease Banner Leased Banner Sold Banner Under Contract banner Off Market banner Selling Now banner     Alright now lets take a look at the CSS, markup and the demo The Markup [geshi lang="html5" nums="1" target="_self" ] [crayon-600278cd01bf2312546322/] [crayon-600278cd01bfb012135096/] The CSS [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd01bfd782029633/] What it looks like This is just a basic example to give you an idea on how to use the above labels. Demo http://jaspreetchahal.org/examples/css-examples/real-estate-listing-banners.html   Download Vector http://bit.ly/M23SNp   I hope that this will be helpful in one way or another. Hope to bring you some other cool stuff in future. Cheers, Advertisement   … [Read more...]

CSS3 Triangle with border

Hi Guys, There are heaps of tutorial floating around that shows how to draw triangles in CSS. I read a few and I thought it could be helpful to add my bit to it. None of them talks about how we can create say a triangle with just a border. Something like this As you can see that the triangle has border. Now this is a triangle facing east right! but you can use the same technique to draw northbound or eastbound or south bound triangles. The Markup [geshi lang="html4strict" nums="1" target="_self" ] [crayon-600278cd0263f881721834/] [crayon-600278cd02645049555481/] The CSS [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd02646166350717/]     This will draw what you see in the image Idea is to draw a triangle and then draw another triangle on top of it. To understand how borders work I strongly recommend reading this article http://jonrohan.me/guide/css/creating-triangles-in-css/ Just continuing with the CSS, we are creating triangle with just playing with transparency and position. :after is just inserting a space after our arrow div You can try this too. A triangle facing north The CSS [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd02647991443830/] The above will give me following result You can change the border color to make it more appealing and you can with positioning to say hide one side. I hope this helps Cheers, Advertisement       … [Read more...]

CSS3 columns layout without Floats and clears

Hi Guys, The new sun is shinning above major browsers and I guess it will shine soon on IE as well. What I am going to share today is the way CSS is coming to our help in columnizing without needing floats and clears All done by CSS engine. Now you still can't use it in production because of the lack of support in some browsers, see the browser support section in this post. Up until now we have used many frameworks that comes with Grid systems, table layouts. But we all learn, adapt to whats available. For the CSS styles I am going to discuss/show in my post it will be adapted say in coming months. No way this is a replacement to grid styles that we get from different framework because lot of work still need to be done by us. But these style provide cleanliness and simplicity in approach. Here are some CSS styles that I will be touching column-count This property set the number of desired columns column-gap This is like cell spacing for me that we've been using for ages with HTML Tables column-width defines the base value for the columns width. default is auto and is calculated by browsers column-rule-width for me this is like a splitter. A line between two columns column-rule-style can be one of these none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset; column-rule-color can be a HEX or rgb color value. column-span I think this will generally be used for heading.   All right so now that we know what properties we are going to discuss let consider the text below for bases of my examples. [geshi lang="html5" nums="1" target="_self" ] [crayon-600278cd0289a076045604/] I've already given class names in above markup elements. Now that we are ready lets create 3 columns with CSS shown below [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd0289e924081728/]     Result http://jaspreetchahal.org/examples/css-examples/css-column-count.html Now lets add … [Read more...]

Top CSS Tips: How to improve CSS rendering speed

Hi Guys, I thought I should share whatever I have learned in the past about CSS optimization, Some of them are really what we do everyday and are not aware that If thats what you need. Let me go through the list I've compiled over all these years working with CSS. This may not be the complete post because there are far too many things that I may have covered by I will share some obvious ones. So let get started. Using * vs ID Consider this [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd02ade330688407/] When we use * in defining CSS styles that for me is the slowest one. use IDs wherever possible. Browsers render selectors Right to Left Consider this [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd02ae1710063848/] Now that we know that we are using an ID as in #myDiv and we are in wrong frame of mind that browser will definitely find #myDiv very easily and quickly, But you got to understand that browser reads from right to left, thus the first thing in the above CSS style definition they will be searching for span tags and then its parent with ID myDiv. Thus this in itself is not really a good declaration. External Stylesheet file and Style tag in Head I will always put my styles in the head tag of my HTML file. When putting the CSS the page render progressively. This for me has couple of advantages. Styles gets downloaded in progressive manner You will eliminate flash of page load without styles. I would recommend combining all external CSS into one CSS file and moving on page styles to a external CSS file. Descendant selectors They are bad. Consider this [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd02ae2774488809/] [crayon-600278cd02ae3182461292/] This stuff is overly expensive. I always avoid these type of declarations. Many CSS pundits won't recommend it especially when you are trying to form a tree with tags. Using @import @import is there for use but its not so … [Read more...]

Free CSS3 pricing page template download

Hi Guys, Got an inspiration from many designs so thought I should contribute as well. Below is what you will be expecting     Below is the Mark-up required to produce above result. [geshi lang="html5" nums="1" target="_self" ] [crayon-600278cd02dfe702299151/] [crayon-600278cd02e03062194102/] [crayon-600278cd02e05855814466/] [crayon-600278cd02e06759172822/] [crayon-600278cd02e07474431127/] [crayon-600278cd02e0e397862572/]   CSS is given below [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd02e0f071693625/]   Download full File from link below   Advantage of above are that you can repeat your pricing section any number of times on a given page because styles are not bound to Container IDs. I hope that you will enjoy it. Making changes to above code is really simple and taking it to another level is what you can do. You can change the code above, host it on your site, don't forget to put a link bck though :) I would like to thanks all websites that have given me direction and inspiration to give you the above. Cheers,   Advertisement     … [Read more...]

CSS rotate text in div

Hi Guys, Everyday we learn something new and this is those day that I learned something and would like to share. I never really had this situation or use case before that I had to rotate a text inside a DIV or in any other container. So the requirement came up with the new Wordpress plugin I am developing for myself. Let see how this is done. First the proposed property is called transform and is available in webkit and Mozilla browser with their prop prefixes i.e. -webkit and -moz Lets check out the CSS to anticlockwise rotate text by 90 degrees i.e. [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd0304b929092509/]   Now lets check the markup [geshi lang="html5" nums="1" target="_self" ] [crayon-600278cd03051455709268/] Ok So when you try to load the above in FireFox or Chrome or Safari all works well but in IE it doesn't work that well because as usual IE has no support for transform property. But IE has its own filter for this stuff to work. Here is what you can do. You can do a check on IE and add IE filter to the style above. This is how its done [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd03052554879916/]   The end result is shown below   I hope this helps Advertisement   Further reading on this topic http://www.thecssninja.com/css/real-text-rotation-with-css http://css-tricks.com/date-display-with-sprites/ Cheers … [Read more...]

CSS Metallic Text

Hi Guys, Today I am going to show you really cool feature of CSS that will allow us to use a Background Image behind our text. Pitfalls: This tip only works with Webkit enabled browsers so IE and other non webkit browser will not entertain this concept. But may be in future they will support it because its really cool. Ok to start with here is a metallic background that I am going to use.   Now lets browse to what CSS I got in store for you. Ok so lets Go ahead and check out the Markup first [geshi lang="html5" nums="1" target="_self" ] [crayon-600278cd03b74804900017/] Advertisement   Now lets check the CSS [geshi lang="css" nums="1" target="_self" ]   [crayon-600278cd03b78853229469/] [crayon-600278cd03b7a765907614/] As you see that I am using background-clip CSS3 property to create a clipping mask using the text to mask the background. Clipping mask is term that is familiar with all graphic designers I hope. But search Google for clipping masks, there are heaps of tutorials on that. Don't forget copy metal.jpg to the same directory where your markup is else you will need to change the path to that image. When you check it in Chrome (say for instance) you will get something like this Now if you try to open same file in IE. It won't work. Because IE is C**p and is pain in web developer's A** Here is a quick fallback to atleast show text but you can write some Javascript I hope to detect if a CSS property will work or not in a given browser. Use Modernizer library to do that. Ok so a quick fall back for IE is to include this line in above style [crayon-600278cd03b7b156908126/] So now on IE the above image looks like this [crayon-600278cd03b7d675436293/] I know it looks crap but I guess using Modernizer will help to get around that. With Modernizer you can detect if a CSS property is  supported that all you need to do is to get Rid of that background Image and probably change the … [Read more...]

Pure CSS3 Buttons – 2

Hi Guys, Please +1 (at top) this post if you like it. This is follow up to my another post here http://jaspreetchahal.org/cool-pure-css-buttons/ I took another initiative to create some cool looking buttons that purely work with CSS3. You can always post me your buttons using contact page of my blog. Now here is the first one [raw] Really cool looking button [/raw] Code for above button is below [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd03d77639339348/] [crayon-600278cd03d7b270060351/] Now just changing the Border Radius, color, background and padding will give us totally different result and can be used as new button. Here is what I've done. [raw] Really cool looking button [/raw] Here is code for this button [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd03d7c362266576/] [crayon-600278cd03d81397941000/] Next one is my favourite one. A blue button Yippi. I will have 2 variant for it. [raw] My favourite button [/raw] Here is code for this above button. [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd03d82490107628/] [crayon-600278cd03d85209857638/] Now lets change some key CSS properties like padding, border radius and see how we can change look of the above button and get a brand new button. You can change colors etc to make it look different Here is a variance [raw] Blue button [/raw] Advertisement     Here is code for this above button. [geshi lang="css" nums="1" target="_self" ] [crayon-600278cd03d86400718735/] [crayon-600278cd03d89584565391/] I know this can be bettered so If you have something to share please do so by contact me. Cheers! [sam_ad id="56" codes="true"] … [Read more...]