How To Create A Java Keystore Containing A Self Signed Certifate Generated With OpenSSL

A small shell script to generate a private key, a self signed certificate using OpenSSL and finally importing them into a Java keystore. A self signed certificate is usually used during development and test phases, so to make your life easier, the key created is not protected by password. The .p12 file being created by openssl is password protected because lot of users reported that otherwise keytool would refuse to import it. The self signed certificate will expire after 9999 days, I hope it is enough time to complete your development.

# generating private key without password
openssl genrsa -out server.private.key 2048

# generating a certificate signing request
openssl req -new -key server.private.key -out server.csr -subj "/C=IT/ST=Milan/L=Milan/O=MyOffice/OU=IT Department/CN=mywebsite"

# self signing the certificate
openssl x509 -req -days 9999 -in server.csr -signkey server.private.key -out server.crt

# including private key and certificate to a pkcs12, needed to import them into a keystore
openssl pkcs12 -export -in server.crt -inkey server.private.key -out server.p12 -name mywebsite -CAfile ca.crt -caname root -password pass:pazzword

# importing it into a newly created Java keystore
keytool -importkeystore \
        -deststorepass pazzword -destkeypass pazzword -destkeystore keystore \
        -srckeystore server.p12 -srcstoretype PKCS12 -srcstorepass pazzword \
        -alias mywebsite

References

https://devcenter.heroku.com/articles/ssl-certificate-self
http://cunning.sharp.fm/2008/06/importing_private_keys_into_a.html
http://stackoverflow.com/questions/2685512/can-a-java-key-store-import-a-key-pair-generated-by-openssl

Steps in CSS3

Jump immediately to the demo Demo.

It’s quite usual for a website providing some kind of workflow to sport a “steps bar” that gives the user a visual representation of what steps are still missing to complete the procedure.

Obviously you can do it using purely CSS3. Let’s see how.

Let’s start with a div in which we’ll put the steps inside.

<div class="steps_box"></div>

Inside it we add a new div element for each step we want to show. I used a total of three classes, “steps_step” that should be assigned to the div that contains all the steps, “index” for the span containing the step number (or whatever you want to use as a step identifier) and “content” for the text representing the description of the step.

<div class="steps_step ">
 <span class="index">1</span>
 <span class="content">Check Out</span>
</div>

Let’s complete the example. We still miss a class to set which is the currently active step. To do this let’s use another extra class “selected”. Finally we obtain something like that:

<div class="steps_box">
<div class="steps_step "><span class="index">1</span>
 <span class="content">Check Out</span></div>
<div class="steps_step selected"><span class="index">2</span>
 <span class="content">Payment</span></div>
<div class="steps_step "><span class="index">3</span>
 <span class="content">Confirmation</span></div>
</div>

Now let’s think about the CSS and let’s start styiling the “steps_box”. Nothing really exotic but the border radius parameters that will draw the box with rounded corners with different radius.

div.steps_step {
	position: relative;
	top: 10px;
	display: inline;
	margin-right: 10px;
	padding: 10px;
	color: white;
	background-color: #BBBBBB;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 4px;
}

Let’s add some shadow to the text.

div.steps_step.selected {
	background-color: #8B4513;
	text-shadow: #363535 3px 3px 5px;
}

Let’s detach the index for its normal position and let’s inflate it to make it absolutely bigger.

div.steps_step.selected span.index {
    color: #FF7F24;
    position:relative;
    font-size: 340%;
    top: 25px;
}

Pure CSS3 Ribbon

Have you ever wanted your site to sport a “ribbon” in the upper right corner ?

You can easily do it using CSS3. Start with a simple DIV element that will define the ribbon content.


<div>CSS3 Ribbon</div>

Then let’s start applying some styles through CSS. First of all, let’s detach the element from the document flow and let’s put it in the top right corner.

position:fixed;
right: 0px;
top: 0px;

Then we should rotate it by 45 degrees clockwise, as every banner actually is. Let’s use transform and transform-origin along with all the needed browser translations of this not yet unanimously supported attributes.

-moz-transform-origin: 50% 50%;
-moz-transform: translate(90px,30px) rotate(45deg);
-webkit-transform-origin: 50% 50%;
-webkit-transform: translate(90px,30px) rotate(45deg);
-o-transform-origin: 50% 50%;
-o-transform: translate(90px,30px) rotate(45deg);
transform-origin: 50% 50%;
transform: translate(90px,30px) rotate(45deg);

Then we add some style to the banner itself.

color: white;
background: #119911;
border: 10px white double;
padding: 10px;

This is the live demo.

Hope you enjoy it.