#CSSHumor
Explore tagged Tumblr posts
Visit Tumblr Blog
Explore Tumblr blogs with no restrictions, modern design and the best experience.
Last Seen Tumblr Blogs
Fun Fact
Tumblr Inc. is funded by 13 investors.
Text
CSS Joke: Off-Center
Get a laugh and show off your knowledge of web design with our "CSS Joke: Off-Center" design. The text "I have a CSS joke, but it's off-center" is prominently featured on a vibrant yellow rectangular background, making it a perfect addition to any web developer's collection or a perfect gift for the computer science enthusiast in your life. Whether you're a web developer, programmer or just have an interest in code and web design, this design will make a great addition to your wardrobe. With high-quality printing on a variety of products, this design will look great for years to come. Order yours today and add a little humor to the world of web design.
#CSSJoke#OffCenter#WebDesigner#FunnyWebDesign#CSSHumor#CSSGift#GiftForWebDeveloper#WebDeveloperGift#WebDesignerGift#WebDesignHumor#WebDesignerDesign#WebDesignerFashion#WebDesignerHumorDesign#WebDesignerWardrobe#WebDesignerTShirt#WebDeveloperTShirt#WebDesignerGiftTShirt#CleverWebDesign#FunnyWebDesignDesign#WebDesignFunnyTShirt#WebDesignEnthusiastGift#WebDesignLoverGift#CodeHumor#WebDevelopmentHumor#CSSDesign#WebDesignJokes#shop#redbubble#pixel art#digital art
0 notes
Text
Things you may not have known about HTML & CSS
CSS em unit
Originally, the CSS em unit was derived from the width of the capital letter M, which is where its name came from. I remind myself I first read this in a CSS book a while ago, not sure about the book’s name but you can check the Wikipedia page for more on this topic.
HTML5 tags
The HTML5 structural elements are a practical implementation of naming searches among CSS class and id selectors found in the wild at that time. I first read about how the currently HTML5 tags were born while digging into Introducing HTML5 By Bruce Lawson and Remy Sharp.
Minimal valid web page
With the HTML5 arrival, you’d only need to define the doctype and title in order to create a new valid web page. So, theoretically, no html, head or body tags are needed for that. This is happening because browsers assume them anyway, just check browsers’ debuggers with the code below:
<!doctype HTML> <title>Bazinga</title>
CSS specificity
It takes 256 chained CSS class selectors in order to beat an id specificity. When Chris Coyier made this example, there has been a lot of discussion on this topic. Ryan Seddon wrote some thoughts about this too.
Also, on topic, an interesting fact is that there is no maximum length for a class name or id in CSS.
Colors
Peru and Tomato are actually both valid CSS color names. Also, the hex #badA55color is not so badass, it’s actually sort of lime :)
Also, when using the HTML deprecated bgcolor attribute, a bloody red color is rendered. Mathias mentioned it in his video as being the blood of Chuck Norris’s enemies. Pure coincidence… or not :)
Read the Stack Overflow discussion to find out why does HTML think “chucknorris” is a color.
CSS can be #funny
Check the following CSS lines to put a smile on your face:
#universe:before { content: ""; } .ninja { visibility: hidden; } .kids-these-days { -webkit-perspective: none; } .work:after{ content:"Beer!"; }
Also, you may want to check CSSHumor on Twitter for more.
CSS px != Device px
The “px” unit in CSS doesn’t really have anything to do with screen pixels, despite the poorly chosen name. You need to take deep breath and take your time to read more here and here.
No (more) CSS4
It seems that there is no such thing as CSS4 after all. Also, CSS3 is everything after CSS2.1, it’s all about modules. Tab Atkins wrote in detail about why there is no such thing as CSS4.
How to tell if a site’s using HTML5 #funny
Try it on Internet Explorer.
Did it work?
No?
It’s HTML5.
HTTP request
The fastest HTTP request is the one not made.
This is not HTML & CSS related but I like this line a lot. Everytime I work on a project and try to optimize the number of HTTP requests, this pops up into my mind. I guess I first saw it while reading on of Steve Souders’ posts.
::before & ::after pseudo elements
Until a few days ago, Firefox was the only one that supported transitions and animations for CSS pseudo elements like ::before and ::after. That’s a great feature and the good news for 2013 is that WebKit now supports that too. You can now open Google Chrome Canary and see them in action.
When you drop IE6 and IE7…
IE6 does not play an important role anymore, so with that in mind, now it’s perfectly OK to use:
Multiple CSS class selectors (e.g. .foo.bar)
Attribute selectors (e.g. E[foo])
Fixed positioning
Immediate child selector (e.g. .foo > .bar)
Read more about this matter here and if IE7 isn’t on your supported browsers list as well, you may want to use the shortest clearfix ever.
Costly CSS properties
Usually, CSS properties aren’t expensive at all, but when it comes about browser painting, you should be aware that some of the following can affect the way your page renders:
position:fixed
background-position: fixed
border-radius
background-size
box-shadow
gradients
That’s it!
https://catalin.red/things-you-may-not-have-known-about-html-css/
0 notes