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

OSGi Blueprint visualization

What is blueprint?Blueprint is a dependency injection framework for OSGi bundles. It could be written by hand or generated using Blueprint Maven Plugin. Blueprint file is only an XML describing beans, services and references. Each OSGi bundle could hav...
DDevelopment & Design

Inconsistent Dependency Injection to domains with Grails

I've encountered strange behavior with a domain class in my project: services that should be injected were null. I've became suspicious as why is that? Services are injected properly in other domain classes so why this one is different?

Constructors experiment

I've created an experiment. I've created empty LibraryService that should be injected and Book domain class like this:

class Book {
    def libraryService

    String author
    String title
    int pageCount

    Book() {
        println("Finished constructor Book()")
    }

    Book(String author) {
        this()
        this.@author = author
        println("Finished constructor Book(String author)")
    }

    Book(String author, String title) {
        super()
        this.@author = author
        this.@title = title
        println("Finished constructor Book(String author, String title)")
    }

    Book(String author, String title, int pageCount) {
        this.@author = author
        this.@title = title
        this.@pageCount = pageCount
        println("Finished constructor Book(String author, String title, int pageCount)")
    }

    void logInjectedService() {
        println("    Service libraryService is injected? -> $libraryService")
    }
}
class LibraryService {
    def serviceMethod() {
    }
}

Book has 4 explicit constructors. I want to check which constructor is injecting dependecies. This is my method that constructs Book objects and I called it in controller: 

class BookController {
    def index() {
        constructAndExamineBooks()
    }

    static constructAndExamineBooks() {
        println("Started constructAndExamineBooks")
        Book book1 = new Book().logInjectedService()
        Book book2 = new Book("foo").logInjectedService()
        Book book3 = new Book("foo", 'bar').logInjectedService()
        Book book4 = new Book("foo", 'bar', 100).logInjectedService()
        Book book5 = new Book(author: "foo", title: 'bar')
        println("Finished constructor Book(Map params)")
        book5.logInjectedService()
    }
}

Analysis

Output looks like this:

Started constructAndExamineBooks
Finished constructor Book()
    Service libraryService is injected? -> eu.spoonman.refaktor.LibraryService@2affcce2
Finished constructor Book()
Finished constructor Book(String author)
    Service libraryService is injected? -> eu.spoonman.refaktor.LibraryService@2affcce2
Finished constructor Book(String author, String title)
    Service libraryService is injected? -> null
Finished constructor Book(String author, String title, int pageCount)
    Service libraryService is injected? -> null
Finished constructor Book()
Finished constructor Book(Map params)
    Service libraryService is injected? -> eu.spoonman.refaktor.LibraryService@2affcce2

What do we see?

  1. ✔

    Empty constructor injects dependencies.

  2. ✔

    Constructor that invokes empty constructor explicitly injects dependencies.

  3. ✘

    Constructor that invokes parent's constructor explicitly does not inject dependencies.

  4. ✘

    Constructor without any explicit call declared does not call empty constructor thus it does not inject dependencies.

  5. ✔

    Constructor provied by Grails with a map as a parameter invokes empty constructor and injects dependencies.

Conclusion

Always explicitily invoke empty constructor in your Grail domain classes to ensure Dependency Injection! I didn't know until today either!