Witty Sparks |
- Custom CSS List or HR separators powered with Content and Counter property
- Will the Facebook Smartphone turn out to be a successful venture?
- Get ready to watch The Twilight Saga: Breaking Dawn – Part 2 this November!
| Custom CSS List or HR separators powered with Content and Counter property Posted: 31 May 2012 03:41 AM PDT Not sure from where I should start. These days simple and light weight CSS powered sites are more popular and makes your site to look beautiful with just few tweaks in CSS. I just thought to create some Ordered list without OL or UL or Li Tags etc. If we break the OL structure we miss the counter and manually start it again to continue. Since HTML5 is in place we use Article tags to display multiple articles in one single page, what if we want to put a counter like Article 1 or Article 2 etc. Yes this can be made possible with CSS Content and Counter property.  Custom CSS List or hr separator styles powered with Content property and pseudo-elements
Look at this simple CSS and HTML for reference: CSS: h2{margin:0px;text-shadow:0 1px 0 #FFF;} p{padding:10px 5px 0;font-size:90%;} hr{border:1px 0 0 0;border-style:solid;color:#FFF;counter-increment:relatedarticles;margin:30px 0 20px 0;text-align:center;display:block;} .banner{ counter-reset: relatedarticles; } .banner hr{border-color:#4BA800;} .banner hr:before{content:"Article "counter(relatedarticles);width:100px;height:30px;display:block;background-color:#4BA800;position:absolute;left:50%;margin-top:-25px;line-height:35px;font-weight:bold;border-radius: 5px 5px 0 0;letter-spacing:0.05em;text-shadow: 0 1px 0 #000;margin-left:-50px;font-size:18px;} .banner hr:after{content:"";border-style:solid;border-width:20px 50px 0 50px;border-color:#4BA800 #FFF #FFF #FFF;width:0;height:0;position:absolute;left:50%;margin-top:5px;margin-left:-50px;} HTML: <div class="containers banner" style="width:300px; display:inline-block"> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> This works well in almost all the latest browsers like Internet Explorer 9+, Firefox, Opera, Safari, Chrome etc. and works well in mobile browsers too. So goahead download, customize and feel free to use it in your projects Hope you love to read these too |
| Will the Facebook Smartphone turn out to be a successful venture? Posted: 30 May 2012 11:33 PM PDT Have ever dreamt of using a Facebook smartphone? I'm sure your answer is a no but the thing that you have never even in dreamt of is going to be true! Yes friends the makers of this popular social networking site have decided to take this bold step and launch a smart phone next year. It will be a smartphone with its own unique software supporting it. For this purpose Facebook officials have hired former hardware and software engineers of Apple.  Facebook now steps into the Smartphone market!
Mark Zuckerberg expressed his fear of Facebook being reduced to a mere App on other smartphones and loose its importance. They have been making several attempts in this direction and association with HTC has been one of them. Their main aim seems to be a reduction of dependence of consumers on Google and Apple and ultimately more control over them. Talking about this, a Facebook spokeswomen said “We’re working across the entire mobile industry; with operators, hardware manufacturers, OS providers, and application developers.” Lets see what their efforts will lead them to. Facebook’s Secret Smartphone: But we have to wait until next year for that! Meanwhile do tell me what is your opinion about a Facebook phone. Will you buy it? Or do you think it will just be an extra expense? Hope you love to read these too |
| Get ready to watch The Twilight Saga: Breaking Dawn – Part 2 this November! Posted: 30 May 2012 12:35 PM PDT The Twilight Saga was the favorite of the audience since day one. People awaited each sequel as excitedly as they watched the movie for the first time. Seeing this success its makers have now decided to release another sequel which had been in the making for a while now. Yes! We are soon going to see Breaking Dawn Part II in the theaters near us.  The Twilight Saga: Breaking Dawn: Part 2
THE TWILIGHT SAGA: BREAKING DAWN – PART 2 – Teaser Trailer: The fifth and final installment of the “Twilight Saga” film franchise will bring back Kristen Stewart, Robert Pattinson and Taylor Lautner as Bella, Edward and Jacob respectively. I'm going to end it here. If you want to know more make sure you go to the theaters this November! Hope you love to read these too |
Will share such simple CSS examples here after.| You are subscribed to email updates from Witty Sparks To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment