Tag Archives: QuickTip

CSS3 Quick Tip: plastic buttons with gradients and box-shadows

Tutorial,

Hi all.

Tonight I was browsing dribble.com when I stumbled on this impressive piece of design by David Lanham:

I wanted to replicate this buttons with some CSS3 styling, using all the cool new things you can get: border radius, box shadow, gradients and text shadow, to name a few.

I started with a simple standard HTML5 document.

<!DOCTYPE html>
<html>
  <head>
    <title>CSS3 Plastic Buttons</title>
  </head>
  <body>
    <div class="container">
      <a href="#" class="red button">Red</a>
      <a href="#" class="blue button">Blue</a>
    </div>
  </body>
</html>

The results so far aren’t impressive. Let’s start to add some styling.

body {
  background: #32383a;
}
.container {
  width: 450px;
  margin: 150px auto;
}
a, a:link, a:visited {
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #ddd;
  font-weight: bold;
}

Nothing complicated here: I set the background color for the page then positioned the buttons’ container roughly in the center of the viewport and gave some basic styling to the anchor tag, our button-to-be.

Now we can start to style our .button class. First I added some margin to separate the buttons apart from each other and some padding to set the button’s size and to place the text in the lower left corner.

I also set the line-height to 65 pixel in order to position the buttons well apart if you want to place them in two or more rows.

a.button {
  margin: 10px 5px;
  padding: 30px 40px 6px 10px;
  line-height: 65px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  border: 2px solid #111;
  -webkit-border-radius: 7px;
      -mozborder-radius: 7px;
          border-radius: 7px;
  -webkit-box-shadow: 0 -1px 4px rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.8);
     -moz-box-shadow: 0 -1px 4px rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.8);
          box-shadow: 0 -1px 4px rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.8);
}

You can notice that I’m starting to use some new CSS3 styling: I added a slight hint of shadow to the button’s text with text-shadow (reference) to give it more depth.
I also gave the button a 2 pixel rounded dark border and two different box shadows: an highlight and a button’s drop shadow to the bottom (reference).
As you can see you can concatenate several box shadows together, to achieve different kind of effects.

Right now the buttons have the shape but not the colors we want, let’s use some CSS3 gradients!

a.red {
  background: #b3312a; /* Old Browser */
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.4, #A02C28), color-stop(0.95, #C24B45), color-stop(0.96, #d4766e), color-stop(0.99, #C24B45)); /* Chrome, Safari4+ */
  background: -moz-linear-gradient(center bottom, #A02C28 40%, #C24B45 95%, #d4766e 96%, #C24B45 99%); /* FF3.6+ */
  background: -webkit-linear-gradient(bottom, #A02C28 40%, #C24B45 95%, #d4766e 96%, #C24B45 99%); /* Chrome10+, Safari5.1+ */
  background: -o-linear-gradient(bottom, #A02C28 40%, #C24B45 95%, #d4766e 96%, #C24B45 99%); /* Opera11.10+ */
  background: -ms-linear-gradient(bottom, #A02C28 40%, #C24B45 95%, #d4766e 96%, #C24B45 99%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F5A2A2', endColorstr='#C24B45', GradientType=0 ); /* IE6-9 */
  background: linear-gradient(bottom, #A02C28 40%, #C24B45 95%, #d4766e 96%, #C24B45 99%); /* W3C */
}
a.blue {
  background: #202631; /* Old Browser */
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.1, #202631), color-stop(0.95, #3e464f), color-stop(0.96, #67717c), color-stop(0.99, #444f5e)); /* Chrome, Safari4+ */
  background: -moz-linear-gradient(center bottom, #202631 10%, #3e464f 95%, #67717c 96%, #444f5e 99%); /* FF3.6+ */
  background: -webkit-linear-gradient(bottom, #202631 10%, #3e464f 95%, #67717c 96%, #444f5e 99%); /* Chrome10+, Safari5.1+ */
  background: -o-linear-gradient(bottom, #202631 10%, #3e464f 95%, #67717c 96%, #444f5e 99%); /* Opera11.10+ */
  background: -ms-linear-gradient(bottom, #202631 10%, #3e464f 95%, #67717c 96%, #444f5e 99%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#202631', endColorstr='#3e464f', GradientType=0 ); /* IE6-9 */
  background: linear-gradient(bottom, #202631 10%, #3e464f 95%, #67717c 96%, #444f5e 99%); /* W3C */
}

It seems a lot of code, but actually I wanted to use all the different browsers’ custom syntaxes. You can use this beautiful tool to test your colors and generate the code.
I tried to adhere to the original colors as mush as I could, playing with the percentages you can achieve subtle effects and reach amazing results.

Now it’s time to add some “animation” to our buttons, first by adding a glow effect to the a:hover state.

a.button:hover {
  -webkit-box-shadow: 0 -1px 4px rgba(255,255,255,0.4), 0 2px 5px rgba(0,0,0,0.8);
     -moz-box-shadow: 0 -1px 4px rgba(255,255,255,0.4), 0 2px 5px rgba(0,0,0,0.8);
          box-shadow: 0 -1px 4px rgba(255,255,255,0.4), 0 2px 5px rgba(0,0,0,0.8);
}

I enhanced the highlight around the button but you can do other things, like changing the gradient colors or whatever you like.

Finally I styled the a:active state in order to simulate the clicking of the button. I wanted to simulate the actual pressing of a plastic button, so I played with the padding and the relative positioning in order to move the text slightly 1 pixel to the top.

Then I also changed some percentages of the gradient to move the highlight to the top, just as the button is being pressed down. As a last thing I removed the glow effect of the hover state because I didn’t want to put too much stuff at the same time.

a.button:active {
  position: relative;
  top: -1px;
  padding-top: 29px;
  padding-bottom: 6px;
  border-bottom: 3px solid #111;
  -webkit-box-shadow: 0 -1px 4px rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.8);
     -moz-box-shadow: 0 -1px 4px rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.8);
          box-shadow: 0 -1px 4px rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.8);
}
a.red:active {
  background: #b3312a; /* Old Browser */
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.4, #A02C28), color-stop(0.97, #C24B45), color-stop(0.98, #d4766e), color-stop(0.99, #C24B45)); /* Chrome, Safari4+ */
  background: -moz-linear-gradient(center bottom, #A02C28 40%, #C24B45 97%, #d4766e 98%, #C24B45 99%); /* FF3.6+ */
  background: -webkit-linear-gradient(bottom, #A02C28 40%, #C24B45 97%, #d4766e 98%, #C24B45 99%); /* Chrome10+, Safari5.1+ */
  background: -o-linear-gradient(bottom, #A02C28 40%, #C24B45 97%, #d4766e 98%, #C24B45 99%); /* Opera11.10+ */
  background: -ms-linear-gradient(bottom, #A02C28 40%, #C24B45 97%, #d4766e 98%, #C24B45 99%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C24B45', endColorstr='#F5A2A2', GradientType=0 ); /* IE6-9 */
  background: linear-gradient(bottom, #A02C28 40%, #C24B45 97%, #d4766e 98%, #C24B45 99%); /* W3C */
}
a.blue:active {
  background: #202631; /* Old Browser */
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.1, #202631), color-stop(0.97, #3e464f), color-stop(0.98, #67717c), color-stop(0.99, #444f5e)); /* Chrome, Safari4+ */
  background: -moz-linear-gradient(center bottom, #202631 10%, #3e464f 97%, #67717c 98%, #444f5e 99%); /* FF3.6+ */
  background: -webkit-linear-gradient(bottom, #202631 10%, #3e464f 97%, #67717c 98%, #444f5e 99%); /* Chrome10+, Safari5.1+ */
  background: -o-linear-gradient(bottom, #202631 10%, #3e464f 97%, #67717c 98%, #444f5e 99%); /* Opera11.10+ */
  background: -ms-linear-gradient(bottom, #202631 10%, #3e464f 97%, #67717c 98%, #444f5e 99%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e464f', endColorstr='#202631', GradientType=0 ); /* IE6-9 */
  background: linear-gradient(bottom, #202631 10%, #3e464f 97%, #67717c 98%, #444f5e 99%); /* W3C */
}

So, I think that’s all for tonight. I consider this just a little experiment and I hope you’ll find it useful.

I tested this code with Chrome 12, Safari 5 and Firefox 4. I know that it doesn’t work as intended on Internet Explorer but I don’t care.

You can find the final result and then some more on this page.

Bye,
L

Ruby on Rails Quick Tip: passing variables to i18n localized strings

Tutorial, ,

UPDATE: this tutorial has been updated on May 6th, 2011. Thanks to equivalent.

Hi all,
today I want to share a little gotcha about Ruby on Rails.

I usually embed variables inside my erb (or haml) code in my view to do things like these:

<p>
  Welcome, <%= @user.name %> to our awesome app
</p>

In order to internazionalize my application I needed to pass the username from the view to the localized string.
To do it you have to pass to the translate method an hash with your variable as value and a key to be referenced inside the locale yml file:

<p>
  <%= t("message.welcome", :username => @user.name) %>
</p>

While in the locale yaml file you have to embed the placeholder inside double curly brackets, like this {{variable}}:

en:
  message:
    welcome: "Welcome, %{username} to our awesome app"

Bye and I hope you will find this tip useful,
L

WordPress Quick Tip: Custom wp-login.php Logo & Url without hacks

Tutorial, ,

Hi All,
today we want to share another quick tutorial on how to change the WordPress logo and url to wordpress.org on the wp-login.php page, without having to change any line of the original code. In this way you will be able to retain the changes without losing them with any update of WordPress.

The wp-login.php Login Form

Original Login Form

Custom Login Logo

In order to change the default WordPress logo you have to add some css styling to the wp-login.php head tag. To do this open the functions.php of your theme of choice and add this new function and its hook.

function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_url').'/images/logo.png) !important; }
    </style>';
}
add_action('login_head', 'my_custom_login_logo');

You have to upload your image (in this case logo.png) in your theme’s images directory. You can further personalize the wp-login.php page adding more css styling in the functions but don’t go too far! Keep it simple, baby.

Note: if you are using a child theme, you cannot use the template_url information keyword, because it will return the parent theme’s directory. Instead you will need to use stylesheet_directory as keyword for .get_bloginfo().

Custom Login Url

With the previous code you have changed the logo but there’s still a problem: clicking on your new logo still direct you to the wordpress.org address. You can change this adding a second function to the functions.php file.

function my_custom_login_url() {
  return site_url();
}
add_filter( 'login_headerurl', 'my_custom_login_url', 10, 4 );

In this case I only added the site_url function that will return the full path of your WordPress blog, but you can customize it with whatever url you want.

Conclusions

With these two simple functions you have the choice to personalize your login form of your WordPress blog without having to change any line of the default code. In this way no further WordPress updates will break your code.

Thanks for your attention and we hope you’ll find this helpful.

L

Appcelerator Titanium Quick Tip: Enable “Move to SD Card” in Android Applications

Tutorial, , ,

Hi all and welcome to our site.

We will introduce ourselves soon, in the meantime I want to share with you a small tip I learned in these days after being stuck for some time on this problem.

Are you developing an Android application with Appcelerator Titanium?
Do you want to enable the Android Move to SD Card Feature?

Well, you can’t do it directly editing the manifest file (build/android/AndroidManifest.xml) but you have to add the following lines to the tiapp.xml file in the root directory of the project. Remember to add these lines inside the tags.

<android xmlns:android="http://schemas.android.com/apk/res/android">
    <tool-api-level>8</tool-api-level>
    <manifest android:installLocation="auto">
       <uses-sdk android:minSdkVersion="7" />
    </manifest>
</android>

Now when you install your Android Titanium App on your device, you will be prompted by apps like App 2 SD to move your app to the SD card, freeing the internal memory.

I hope this should be helpful for you, in the following days we will add a lot of features and tutorials to our site.

Stay tuned.

L