Category Archives: CSS Sketch

CSS3 Sketch 2

#canvas .clickToPlay { position: absolute; text-align: center; top: 50%; transform: translateY(-50%); width: 100%; z-index: 2; font-family:sans-serif; left:0; } .play .clickToPlay { display:none; } #canvas, #ring-1, #ring-2, #ring-3, #ring-4{ background:#000; width:300px; height:300px; overflow:hidden; margin: auto; position: absolute; top: 0px; left: 0; … Continue reading

Posted in CSS Sketch | Leave a comment

CSS Sketch 1 – Technique: Masking

.clickToPlay { position: relative; text-align: center; top: 50%; transform: translateY(-50%); width: 100%; z-index: 2; font-family:sans-serif; left:-72px; background-color:rgba(255,255,255,0.5); } #sketch1Explanation.play .clickToPlay { display:none; } #sketch1Explanation .clickToPlay{ position:relative; transform: translateY(-50%) rotate(45deg); } .mask{ box-sizing:border-box; margin:0 auto; width:500px; height:500px; overflow:hidden; } .sky{ width:200px; … Continue reading

Posted in CSS Sketch | Leave a comment

CSS3 Sketch 1

.clickToPlay { position: relative; text-align: center; top: 50%; transform: translateY(-50%); width: 100%; z-index: 2; font-family:sans-serif; left:-72px; background-color:rgba(255,255,255,0.5); } #sketch1.play .clickToPlay { display:none; } #sketch1 .clickToPlay{ position:relative; transform: translateY(-50%); } .mask{ box-sizing:border-box; margin:0 auto; width:500px; height:500px; overflow:hidden; } .sky{ width:200px; height:500px; … Continue reading

Posted in CSS Sketch | Leave a comment