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

Private fields and methods are not private in groovy

I used to code in Java before I met groovy. Like most of you, groovy attracted me with many enhancements. This was to my surprise to discover that method visibility in groovy is handled different than Java!

Consider this example:

class Person {
private String name
public  String surname

private Person() {}

private String signature() { "${name?.substring(0, 1)}. $surname" }

public String toString() { "I am $name $surname" }
}

How is this class interpreted with Java?

  1. Person has private constructor that cannot be accessed
  2. Field "name" is private and cannot be accessed
  3. Method signature() is private and cannot be accessed

Let's see how groovy interpretes Person:

public static void main(String[] args) {
def person = new Person()   // constructor is private - compilation error in Java
println(person.toString())

    person.@name = 'Mike'       // access name field directly - compilation error in Java
println(person.toString())

    person.name = 'John'        // there is a setter generated by groovy
println(person.toString())

    person.@surname = 'Foo'     // access surname field directly
println(person.toString())

    person.surname = 'Bar'      // access auto-generated setter
println(person.toString())

println(person.signature()) // call private method - compilation error in Java
}

I was really astonished by its output:

I am null null
I am Mike null
I am John null
I am John Foo
I am John Bar
J. Bar

As you can see, groovy does not follow visibility directives at all! It treats them as non-existing. Code compiles and executes fine. It's contrary to Java. In Java this code has several errors, pointed out in comments.

I've searched a bit on this topic and it seems that this behaviour is known since version 1.1 and there is a bug report on that: http://jira.codehaus.org/browse/GROOVY-1875. It is not resolved even with groovy 2 release. As Tim Yates mentioned in this Stackoverflow question: "It's not clear if it is a bug or by design". Groovy treats visibility keywords as a hint for a programmer.

I need to keep that lesson in mind next time I want to make some field or method private!

DDevelopment & Design

Control your bandwidth using ntop

I was looking for tool which could help me check who is using my bandwidth. Here are requirements which I want from this kind of tool:local hosts bandwidth distribution - it is helpful when you are loosing your bandwidth and don't know who abuse it in ...