DDevelopment & Design

Saint Nicholas in CSS

Happy Saint Nicholas Day ! And special present for all CSS geecks: CSS SantaHappy Saint Nicholas Day ! And special present for all CSS geecks: CSS Santa

Happy Saint Nicholas Day ! And special present for all CSS geeks: CSS Santa Example on jsfiddle can be found here (thanks to Piotr Przybylski)

html {
    height: 100%;
}
body {
    background-image: url('background.png');
    display: table;
    margin: 0;
    height: 100%;
    width: 100%;
    background-color: #eee;
}
.panelWrapper {
    display: table-cell;
    vertical-align: middle;
}

.face {
    background-color: #FFC4A7;
    border-radius: 60px 60px 60px 60px;
    height: 102px;
    left: 50px;
    position: absolute;
    top: 105px;
    width: 100px;
}

.santa {
    height: 300px;
    width: 200px;
    position: relative;
    margin: 50px auto 0;
    cursor: pointer;
}

.santa .hat {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -50px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 50px 110px 50px;
    border-color: transparent transparent #a40000 transparent;
    line-height: 0px;
    _border-color: #000000 #000000 #a40000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 
}

.santa .hat:after {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 40px 0 0 100px;
    border-color: transparent transparent transparent #a40000;

    -webkit-transform: rotate(15deg);
    -webkit-transform-origin: top left;

    -moz-transform: rotate(15deg);
    -moz-transform-origin: top left;

    -ms-transform: rotate(15deg);
    -ms-transform-origin: top left;

    -o-transform: rotate(15deg);
    -o-transform-origin: top left;

    transform: rotate(15deg);
    transform-origin: top left;
}

.santa .hat:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    left: 75px;
    top: 55px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
}

.santa .hatFur {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 50px 50px 50px 50px;
    box-shadow: 0 6px 2px -6px #000000;
    height: 24px;
    left: 50%;
    margin: 0 0 0 -55px;
    position: absolute;
    top: 100px;
    width: 110px;
}

.santa .eyeLeft {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 50% 50% 50% 50%;
    content: "";
    height: 16px;
    left: 65px;
    position: absolute;
    top: 135px;
    width: 20px;
}

.santa .eyeRight {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 50% 50% 50% 50%;
    content: "";
    height: 16px;
    position: absolute;
    right: 65px;
    top: 135px;
    width: 20px;
}

.eyeLeft:after, .eyeRight:after {
    background-color: #000099;
    border-radius: 5px 5px 5px 5px;
    content: "";
    height: 10px;
    left: 6px;
    opacity: 0.75;
    position: absolute;
    top: 4px;
    width: 10px;
}

.santa:hover .eyeLeft:after, .santa:hover .eyeRight:after {
    opacity: 0.05;
}

.santa:hover .eyeLeft, .santa:hover .eyeRight {
    background-color: #FFB391;
    border-bottom: 1px solid #FF7D55;
    height: 14px;
}

.santa .beard_left, .santa .beard_right {
    position: absolute;
    height: 120px;
    width: 60px;
    bottom: 0;
    left: 50%;
    margin: 0 0 0 -60px;
    overflow: hidden;
}

.santa .beard_right {
    margin: 0;
}

.santa .beard_left:after {
    content: '';
    position: absolute;
    background: white;
    width: 150px;
    height: 150px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    bottom: 0px;
    left: 0;
}

.santa .beard_left:before {
    content: '';
    position: absolute;
    background-color: #FFC4A7;
    width: 73px;
    height: 50px;
    border-radius: 50%;
    top: -45px;
    left: 2px;
    z-index: 5;
}

.santa .beard_right:after {
    content: '';
    position: absolute;
    background-color: #FFC4A7;
    width: 73px;
    height: 50px;
    border-radius: 50%;
    top: -45px;
    right: 2px;
    z-index: 5;
}

.santa .beard_right:before {
    content: '';
    position: absolute;
    background: white;
    width: 150px;
    height: 150px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    bottom: 0px;
    right: 0
}
.nose {
    background-color: #FFB391;
    border: 1px solid #FFB391;
    border-radius: 10px 10px 5px 5px;
    box-shadow: 0 3px 2px #666666;
    height: 20px;
    left: 93px;
    position: absolute;
    top: 162px;
    width: 15px;
    z-index: 100;
}

.mouth {
    background-color: #FFB391;
    border-radius: 0 0 15px 15px;
    height: 10px;
    left: 87px;
    position: absolute;
    top: 200px;
    width: 30px;
}

— Previous article

Custom SonarQube rules for Unit Tests

Next article —

Simple HBase ORM

You May Also Like
DDevelopment & Design

33rd Degree day 3 review

At the last day of the conference, I've decided to skip the first presentations, and get some sleep instead. I was afraid that Venkat's show is going to be too basic, I will see Jacek Laskowski talking about closure at 4Developers, which I'm kind of s...
DDevelopment & Design

Phonegap / Cordova and cross domain ssl request problem on android.

In one app I have participated, there was a use case:
  • User fill up a form.
  • User submit the form.
  • System send data via https to server and show a response.
During development there wasn’t any problem, but when we were going to release production version then some unsuspected situation occurred. I prepare the production version accordingly with standard flow for Android environment:
  • ant release
  • align
  • signing
During conduct tests on that version, every time I try to submit the form, a connection error appear. In that situation, at the first you should check whitelist in cordova settings. Every URL you want to connect to, must be explicit type in: 
res/xml/cordova.xml
If whitelist looks fine, the error is most likely caused by inner implementation of Android System. The Android WebView does not allow by default self-signed SSL certs. When app is debug-signed the SSL error is ignored, but if app is release-signed connection to untrusted services is blocked.



Workaround


You have to remember that secure connection to service with self-signed certificate is risky and unrecommended. But if you know what you are doing there is some workaround of the security problem. Behavior of method 
CordovaWebViewClient.onReceivedSslError
must be changed.


Thus add new class extended CordovaWebViewClient and override ‘onReceivedSslError’. I strongly suggest to implement custom onReceiveSslError as secure as possible. I know that the problem occours when app try connect to example.domain.com and in spite of self signed certificate the domain is trusted, so only for that case the SslError is ignored. 

public class MyWebViewClient extends CordovaWebViewClient {

   private static final String TAG = MyWebViewClient.class.getName();
   private static final String AVAILABLE_SLL_CN 
                               = "example.domain.com";

   public MyWebViewClient(DroidGap ctx) {
       super(ctx);
   }

   @Override
   public void onReceivedSslError(WebView view, 
                                  SslErrorHandler handler, 
                                  android.net.http.SslError error) {

       String errorSourceCName = error.getCertificate().
                                  getIssuedTo().getCName();

       if( AVAILABLE_SLL_CN.equals(errorSourceCName) ) {
           Log.i(TAG, "Detect ssl connection error: " + 
                       error.toString() + 
                       „ so the error is ignored”);

           handler.proceed();
           return;
       }

       super.onReceivedSslError(view, handler, error);
   }
}
Next step is forcing yours app to  use custom implementation of WebViewClient. 

public class Start extends DroidGap
{
   private static final String TAG = Start.class.getName();

   @Override
   public void onCreate(Bundle savedInstanceState)
   {
       super.onCreate(savedInstanceState);
       super.setIntegerProperty("splashscreen", R.drawable.splash);
       super.init();

       MyWebViewClient myWebViewClient = new MyWebViewClient(this);
       myWebViewClient.setWebView(this.appView);

       this.appView.setWebViewClient(myWebViewClient);
       
       // yours code

   }
}
That is all ypu have to do if minSdk of yours app is greater or equals 8. In older version of Android there is no class 
android.net.http.SslError
So in class MyCordovaWebViewClient class there are errors because compliator doesn’t see SslError class. Fortunately Android is(was) open source, so it is easy to find source of the class. There is no inpediments to ‘upgrade’ app and just add the file to project. I suggest to keep original packages. Thus after all operations the source tree looks like:

Class SslError placed in source tree. 
 Now the app created in release mode can connect via https to services with self-signed SSl certificates.