I hate blurry sites and graphics on High Res devices. I also hate to write all these CSS media queries for high resolution screen that takes time and is not fun.
So in the real world, without any help of this great masterpiece of modern web development called Sass our CSS code must be like this:
.not-cool {
width: 150px;
height: 40px;
background-image: url('not-cool.png');
}
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
.not-cool {
background-image: url('.not-cool@2x.png');
-webkit-background-size: 150px 40px;
-moz-background-size: 150px 40px;
-o-background-size: 150px 40px;
background-size: 150px 40px;
}
}
Not cool right?
Just imagine writing all this code everytime you have to use a retina image!
I felt special when I first thought this great mixin that helps you write really fast and clean code with just one line!
Just that difficult, but you can always improve it, I also dont know if there is any other same mixin out there but I still love mine <3
//First call your compass mixin to make your life easier.
@import "compass/css3/background-size";
//And then let's start our mixin
//I found the great name background-image-with-retina.
//You can make yours, like bg-retina or just retina.
//Its up to you!
@mixin background-image-with-retina( $img, $filetype, $size ) {
background-image: image-url( $img + '.' + $filetype );
@include background-size( $size );
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
& {
background-image: image-url($img + '@2x' + '.' + $filetype);
}
}
}
Try to read it and I will explain it.
First we have 3 variables the $img, $filetype and the $size
Then the mixin take care to join all these to one. You can make it smarter and more efficient but this is the basic idea and works really good!
So before you are ready to go live you have to call it, let’s see how our CSS should be know with the cool way:
.cool {
width: 150px;
height: 40px;
@include background-image-with-retina( 'cool', 'png', '150px 40px' );
}
Just this, not media queries, no double background images only 1 cool line :)
Hope you enjoyed this post too and don’t forget to share the love!
Yes I’m noob too.
At least on the rails part at the moment. And if you enjoy writing CSS with Sass and Compass but you don’t know how to start, this post is for you!
Some months ago (I just now find time to write this post) I was looking how to install compass in my already existing rails project. With a quick google search or even with an extensive google search, all the the results talking about static project or new compass stand-alone project. I found nothing about how to install compass really fast an easy like the following post.
I don’t want to spend your time, I know you are here to see how to do it, so here we are!
Open your Gemfile and in the assets group add the gem we need, the compass-rails gem.
... ... # Gems used only for assets and not required # in production environments by default. group :assets do gem 'sass-rails', '~> 3.2.3' gem 'coffee-rails', '~> 3.2.1' gem 'compass-rails' ... ...
That’s it, yes only this!
Now stop your server if it’s turned on, run bundle install to install the gem we just added and you are ready!
You can now start using these cool compass functions with ease :)
@import "compass/css3/border-radius";
Enjoy!
A few days ago I was working on a sticky header for thetudu, all I wanted was just a fixed position header that overlap the content on scrolling. So far sounds good and really easy, you don’t even want Javascript, some pure classic CSS code is the deal.
So let’s see how the code should look like:
<div class="header-container"/>
<header class="header">
<!-- content here -->
</header>
</div>
.header-container {
min-width: 980px;
height: 40px;
position: fixed;
left: 0;
top: 0;
right: 0;
}
.header {
width: 980px;
margin: 0 auto;
}
Everything seems we are ready and if you test it, it works really good. The header is sticked at the top and the content scrolls beneath. I was thinking the same, when I got a big WOW, BOOM, WTF moment of my life, you know that time when you realize that everything you know is nothing and you just discover that your code all these years didn’t work… Is the same moment when I discovered the use of clearfix (where all my sites were invisible broken), or the time I learnt that evertyhing is an object in JS.
You will see right away. Now open the following pages and try to resize the window horizontally, in other words make it as thin as you can. Simulate a case that your users have a small screen, smaller than your site’s width, or maybe a mobile phone.
BOOM!
The content is hiding at the end of the window and there is no way to make it come back to the surface again, lost! This moment is when you realize that all your sticky headers/footers don’t work! And this is very important problem because in all cases above something crucial is missing, signup or purchase.
Personally I think that you should care for your visitors and examine all the possible aspects, this is what facebook does and the others don’t, this is what Dan Cederholm call handcrafted
I said the same words and I jumped straight forward on facebook to check their code.
And voila! Facebook’s header works really well.
Why? Because they check when you resize the window and if your window is smaller than their min-width the sticky header becomes a regular header and goes back at the top of the page, not the browser. Check this video to understand what I’m saying.
The idea is pretty simple and smart but more complex than the first case. So let’s see the differences in the markup and the CSS.
<div class="header-placeholder">
<div class="header-container">
<header>
<!-- content here -->
</header>
</div>
</div>
First, we need one more div as placeholder. The placeholder holds an empty space for the header, so when the header is “flying over the content” and it’s time to landing back to the page as a regular one it needs some space for this.
The CSS is more complex and we’ll see it step by step.
.header-placeholder {
height: 40px;
/* It needs only height just to save the space we want */
}
.header-container {
min-width: 980px;
height: 40px;
position: fixed;
left: 0;
top: 0;
right: 0;
}
.header {
width: 980px;
margin: 0 auto;
}
@media only screen and (max-width: 979px) {
.header-fixed {
position: relative;
}
}
Now if our window is less than 980px, the header will change back to static. If you want to support older browsers you have to use some Javascript to make it work.
function checkSize(){
if ( $(window).width() < 980 ){
$('.header-container').addClass('is-static');
}else {
$('.header-container').removeClass('is-static');
}
}();
/* Then check again on resize */
$(window).resize( checkSize );
.is-static {
position: relative;
}
/* If you use more specific selector on .header-container
e.g. #top .header-container, you need to use !important
e.g. position: relative !important; */
And that’s all! From now all your sticky headers/footers will work perfectly with the right way and I’m waiting to see a lot of websites implement this way. The problem is not exists in the websites that follow the Responsive Web Design technique, but we can’t make everything responsive, so facebook’s way will be useful for all of us.
Left your comment and write your thoughts and suggestions…
It’s been a while since my last post in my blog and I have to say I missed it.
It’s 9 whole months!
The last months I’m working hard on a new app called thetudu a brand new category in the calendars and todo lists market and I’m sure you will love it! (You can see some screenshots on my dribbble)
But enough with thetudu lets go back to the main subject that is the new noise texture generator. The pas months a lot of people used it and tweeted about this and I’m happy that this small handy tool helps so many people to do their job faster. This kind of popularity made me think to add new features into the app and that the new version. I’m listing the features below:
As my close friends know I love Sitepoint’s books. I love them because they teach to everyone all the web trends and programming languages, with very well structured books and easy to read language for everyone from the very amateur to the most intermediate guy. The last very good example is the latest book that they released HTML5 & CSS3 for the Real World (that I suggest you to buy).
jQuery tipTip is a Drew Wilson’s plugin that I love and I use it in 90% of my projects. But because I use firefox, I found a small design problem in Tooltip. The background color is not the same, look at the differences:
You can see that the -webkit- browsers render the tooltip with a light gradient in contrast with firefox that hasn’t got gradient background.
How to solve this problem?
I’ve just come back home from easter holidays and i found in my mailbox a book that i had purchased 2 weeks ago from amazon. Which Book?
HTML5 & CSS3 : Develop with Tomorrow’s Standards Today
With a first look the book is totally designer non-friendly!
It’s a classic Pragmatic Programmers book, with black & white content and full of text pages. The content is a lot and i think that nobody read it all, but it’s a great book for reference as I mentioned in my Amazon review!
When you have stuck, you can navigate fast and easy through the chapters and find the solution to your problem. I especially like the fact that the book’s title is totally TRUE, in every single example they give you a fallback code how to implement the example now days with current standards and technology.
I bought this book with an amazon gift card and i don’t know if i want to pay to buy it, but it’s a good choice if you have $20 in your piggy money box.
Easter is 2 days away, so in my free time after a lot of Angry Birds Seasons (Easter) gaming, I made the following poster!
You can download it free, the bird is full vector so use it wherever you want!
Happy Easter & Holidays to everyone! Have Fun and play Angry Birds…
In this article, I will not taught you how to use image Sprites but how to use them correct!
As you already know the right way to create a lightweight and fast sprite image is to put all small images and graphic parts in one image. A lot of designers (including me) stuff the sprite image a lot and they didn’t leave whitespace between images, this is good if you see your website from a pc.
But have you ever see your (extra stuffed sprite image) website from a mobile device like iPad or iPhone? If you don’t, then in the following images you will realize that the method mentioned above is completely wrong!
