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

Recently at storm-users

I've been reading through storm-users Google Group recently. This resolution was heavily inspired by Adam Kawa's post "Football zero, Apache Pig hero". Since I've encountered a lot of insightful and very interesting information I've decided to describe some of those in this post.

  • nimbus will work in HA mode - There's a pull request open for it already... but some recent work (distributing topology files via Bittorrent) will greatly simplify the implementation. Once the Bittorrent work is done we'll look at reworking the HA pull request. (storm’s pull request)

  • pig on storm - Pig on Trident would be a cool and welcome project. Join and groupBy have very clear semantics there, as those concepts exist directly in Trident. The extensions needed to Pig are the concept of incremental, persistent state across batches (mirroring those concepts in Trident). You can read a complete proposal.

  • implementing topologies in pure python with petrel looks like this:

class Bolt(storm.BasicBolt):
    def initialize(self, conf, context):
       ''' This method executed only once '''
        storm.log('initializing bolt')

    def process(self, tup):
       ''' This method executed every time a new tuple arrived '''       
       msg = tup.values[0]
       storm.log('Got tuple %s' %msg)

if __name__ == "__main__":
    Bolt().run()

  • Fliptop is happy with storm - see their presentation here

  • topology metrics in 0.9.0: The new metrics feature allows you to collect arbitrarily custom metrics over fixed windows. Those metrics are exported to a metrics stream that you can consume by implementing IMetricsConsumer and configure with Config.java#L473. Use TopologyContext#registerMetric to register new metrics.

  • storm vs flume - some users' point of view: I use Storm and Flume and find that they are better at different things - it really depends on your use case as to which one is better suited. First and foremost, they were originally designed to do different things: Flume is a reliable service for collecting, aggregating, and moving large amounts of data from source to destination (e.g. log data from many web servers to HDFS). Storm is more for real-time computation (e.g. streaming analytics) where you analyse data in flight and don't necessarily land it anywhere. Having said that, Storm is also fault-tolerant and can write to external data stores (e.g. HBase) and you can do real-time computation in Flume (using interceptors)

That's all for this day - however, I'll keep on reading through storm-users, so watch this space for more info on storm development.

I've been reading through storm-users Google Group recently. This resolution was heavily inspired by Adam Kawa's post "Football zero, Apache Pig hero". Since I've encountered a lot of insightful and very interesting information I've decided to describe some of those in this post.

  • nimbus will work in HA mode - There's a pull request open for it already... but some recent work (distributing topology files via Bittorrent) will greatly simplify the implementation. Once the Bittorrent work is done we'll look at reworking the HA pull request. (storm’s pull request)

  • pig on storm - Pig on Trident would be a cool and welcome project. Join and groupBy have very clear semantics there, as those concepts exist directly in Trident. The extensions needed to Pig are the concept of incremental, persistent state across batches (mirroring those concepts in Trident). You can read a complete proposal.

  • implementing topologies in pure python with petrel looks like this:

class Bolt(storm.BasicBolt):
    def initialize(self, conf, context):
       ''' This method executed only once '''
        storm.log('initializing bolt')

    def process(self, tup):
       ''' This method executed every time a new tuple arrived '''       
       msg = tup.values[0]
       storm.log('Got tuple %s' %msg)

if __name__ == "__main__":
    Bolt().run()

  • Fliptop is happy with storm - see their presentation here

  • topology metrics in 0.9.0: The new metrics feature allows you to collect arbitrarily custom metrics over fixed windows. Those metrics are exported to a metrics stream that you can consume by implementing IMetricsConsumer and configure with Config.java#L473. Use TopologyContext#registerMetric to register new metrics.

  • storm vs flume - some users' point of view: I use Storm and Flume and find that they are better at different things - it really depends on your use case as to which one is better suited. First and foremost, they were originally designed to do different things: Flume is a reliable service for collecting, aggregating, and moving large amounts of data from source to destination (e.g. log data from many web servers to HDFS). Storm is more for real-time computation (e.g. streaming analytics) where you analyse data in flight and don't necessarily land it anywhere. Having said that, Storm is also fault-tolerant and can write to external data stores (e.g. HBase) and you can do real-time computation in Flume (using interceptors)

That's all for this day - however, I'll keep on reading through storm-users, so watch this space for more info on storm development.

DDevelopment & Design

Rapid js + css development

BackgroundLast time I had some work to do in OSGi web module written in Spring MVC. If we have application splitted to well-designed modules, back-end development in this framework run in OSGi environment is quite fast because after some modification w...
DDevelopment & Design

How we use Kotlin with Exposed at TouK

Why Kotlin? At TouK, we try to early adopt technologies. We don’t have a starter project skeleton that is reused in every new project, we want to try something that fits the project needs, even if it’s not that popular yet. We tried Kotlin first it mid 2016, right after reaching 1.0.2 version