Last active
October 30, 2015 07:39
-
-
Save Guidhouse/852b381a6beca9d53fbe to your computer and use it in GitHub Desktop.
Corners and borders
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Corners and borders | |
*/ | |
div{ | |
font: 150%/1 Helvetica, sans serif; | |
float:left; | |
color: blue; | |
margin:2em; | |
position:relative; | |
max-width: 13em; | |
min-width: 5em; | |
max-height: 13em; | |
min-height: 5em; | |
padding: 2em 3em; | |
} | |
div.first { | |
background: linear-gradient(to top left, transparent 49% , red 50%); | |
background-color: lime; | |
background-size: 4em 4em; | |
background-repeat:no-repeat; | |
border:solid 1px red; | |
text-shadow:0.1em 0.1em 0.5em 0.2em #fdf; | |
box-shadow:0.1em 0.1em 0.5em 0.2em pink; | |
filter: drop-shadow(0 0 5em rgba(34,0,0 0.5)); | |
border-radius: 1em 6px 6px 6px; | |
font: 150%/1 Helvetica, sans serif; | |
} | |
div::before{ | |
border-radius:25px 25px 25px; | |
position:absolute; | |
width:1.2em; | |
height:1.2em; | |
text-align:center; | |
font: 100%/1.2 helvetica, sans serif; | |
margin:1px auto; | |
background-color:beige; | |
color:red; | |
} | |
div.second { | |
background:lime; | |
background: | |
radial-gradient(circle at top left, transparent 2.5em, lime 0), | |
/*radial-gradient(circle at center, red 3em, lime 0)center, */ | |
linear-gradient(-135deg, transparent 15px, lime 0)top right, | |
linear-gradient(-45deg, transparent 15px, lime 0)bottom right, | |
linear-gradient(45deg, transparent 15px, lime 0)bottom left; | |
background-size: 50% 50%; | |
background-repeat:no-repeat; | |
filter: | |
drop-shadow(0 0 10em rgba(0,60,60, 0.5)) | |
drop-shadow(.1em .1em .1em rgba(220,0,0,.5)) | |
drop-shadow(-0.1em -0.1em .1em rgba(220,20,20,.5)); | |
-webkit-filter: | |
drop-shadow(1px 1px 0.15em rgba(220,0,0,5)) | |
drop-shadow(-1px -1px 0.1em rgba(25,25,225,.5)); | |
} | |
div.first::before{ | |
top:0.5em; | |
left:0.5em; | |
box-shadow:inset 0 0 .5em red; | |
content:"S"; | |
} | |
div.second::before{ | |
top:0; | |
left:0; | |
box-shadow:inset 0 0 .15em red; | |
content:"S"; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="first"> | |
Hej. denne tekst er for at gøre opmærksom på at Stella er ekseptionelt dejlig. <br/ > Og for at fylde kassen her ud med bogstaver. | |
</div> | |
<div class="second"> | |
Hej. denne tekst er for at gøre opmærksom på at Stella er ekseptionelt dejlig. <br/ > Og for at fylde kassen her ud med bogstaver. | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var divs = document.getElementsByTagName('div'); | |
divs[1].textcontent = divs[0].textcontent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"separate","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment