Reading Life

Followers

Tuesday, May 29, 2018

Coding club?

We aren't anywhere near Christmas but here's a simple tutorial to make a Christmas tree using CSS.

http://www.cssviking.com/css-christmas-tree#comment-2483

Cssviking.com originally posted this in 2012 but it would make a good exercise for coding clubs.


.ctree {
    background-color: #FFFFFF;
    border: 1px solid black;
    margin: 15px;
    height: 350px;
    position: relative;
}
.ctree .trunk {
    border-color: brown transparent;
    border-style: solid;
    border-width: 0 14px 300px;
    bottom: 0;
    left: 50%;
    height: 0px;
    position: absolute;
    width: 0;
}
.ctree .branches {
    border-bottom-left-radius: 50% 20px;
    border-bottom-right-radius: 50% 20px;
    border-color: green transparent;
    border-style: solid;
    border-width: 0 100px 120px;
    bottom: -270px;
    height: 0px;
    left: -100px;
    position: absolute;
    width: 0;
}
.ctree .branches.middle {
    border-bottom-left-radius: 50% 15px;
    border-bottom-right-radius: 50% 15px;
    border-width: 0 80px 100px;
    bottom: -176px;
    left: -80px;
}
.ctree .branches.top {
    border-bottom-left-radius: 50% 12px;
    border-bottom-right-radius: 50% 12px;
    border-width: 0 60px 80px;
    bottom: -100px;
    left: -60px;
}
.ctree .band {
    background-color: transparent;
    border-color: white;
    border-style: solid;
    border-width: 6px;
    border-radius: 103px;
    clip: rect(152px, 260px, 260px, 82px);
    margin-bottom: 15px;
    height: 200px;
    right: -50px;
    margin-left: -165px;
    position: absolute;
    bottom: -110px;
    width: 200px;
}
.ctree .middle .band {
    bottom: -92px; 
    clip: rect(162px, 260px, 260px, 95px);    
    right: -50px;
}
.ctree .top .band {
    bottom: -77px; 
    clip: rect(172px, 260px, 260px, 110px);    
    right: -50px;
}
.ctree .star {
    border-color: yellow transparent;
    border-style: solid;
    border-width: 0 30px 21px;
    -moz-border-end-style:dashed !important;
    display: block;
    height: 0px;
    left: -28px;
    position: absolute;
    top: -10px;
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    width: 0px;
}
.star:before {
    border-color: yellow transparent;
    border-style: solid;
    border-width: 0 9px 21px;
    -moz-border-end-style:dashed !important;
    content: '';
    display: block;
    height: 0;
    left: -22px;
    position: absolute;
    top: -14px;
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform:rotate(-35deg);
    width: 0;
}
.star:after {
    border-color: yellow transparent;
    border-style: solid;
    border-width: 0 30px 21px;
    -moz-border-end-style:dashed !important;
    content: '';
    display: block;
    height: 0px;
    left: -34px;
    position: absolute;
    top: 3px;
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
    width: 0px;
}

Tuesday, May 22, 2018

On What Matters


"Not everything that can be counted counts, and not everything that counts can be counted."

William Bruce Cameron, "Informal Sociology: A Casual Introduction to Sociological Thinking," 1963. 

Friday, May 18, 2018

Harper Lee Prize for Legal Fiction

Did you know there is a Harper Lee Prize for Legal Fiction?


The prize is given to works that depict lawyers in society and their power to effect change. 

James Grippando's Gone Again won last year's award.