Dead Eye Creative
Select Page

A bunch of little CSS tricks I use on the Regular…

Media Queries

@media only screen and ( max-width: 767px ) {
p.linkBlue { color:#2ea3f2; }
}

/* The above is a media query – The main way that we make responsive design work. It says if the screen is 767px or smaller, do this */

Explanation

With CSS there is one main thing to remember. The code runs from top to bottom. (Duh) – In the code to the right, it says do this if it’s full screen. Then if it’s smaller do this, then if it’s smaller do this.

Media Query Examples

/* Normal CSS – Consider these to be divs in a header */

.inside-left { float:left; padding:10px; }
.inside-right { float:right; padding:10px; }

/* If we move to a smaller screen, 900 or less, then go ahead and do this */

@media only screen and ( max-width: 900px ) {
.inside-left { width:90%; float:none; text-align:center; margin-left:auto; margin-right:auto; }
.inside-right { width:90%; float:none; text-align:center; margin-left:auto; margin-right:auto; }
}

/* Then once we get down to 600 wide do this */

@media only screen and ( max-width: 600px ) {
.inside-right { display:none; }
}

The following where just a few random CSS styles that I thought where cool.

A lot of them where from here: http://css-tricks.com/examples/ShapesOfCSS/

Talk bubbles –
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s

CSS Code:

.talkbubble, .talkbubble2 {
/*width: 120px;
height: 80px;*/
background: #ab040b;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding:20px;
color:#fff;
margin-bottom:10px;
}
.talkbubble:before {
content:””;
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #ab040b;
border-bottom: 13px solid transparent;
}
.talkbubble2:before {
content:””;
position: absolute;
left: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-left: 26px solid #ab040b;
border-bottom: 13px solid transparent;
}

CSS Code:

.magnifying-glass
{
font-size: 10em; /* This controls the size. */
display: inline-block;
width: 0.4em;
height: 0.4em;
border: 0.1em solid red;
position: relative;
border-radius: 0.35em;
}
.magnifying-glass::before
{
content: “”;
display: inline-block;
position: absolute;
right: -0.25em;
bottom: -0.1em;
border-width: 0;
background: red;
width: 0.35em;
height: 0.08em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

CSS Code:

.curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
.curvedarrow:after {
content: “”;
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

CSS Code:

.space-invader{

box-shadow:
0 0 0 1em red,
0 1em 0 1em red,
-2.5em 1.5em 0 .5em red,
2.5em 1.5em 0 .5em red,
-3em -3em 0 0 red,
3em -3em 0 0 red,
-2em -2em 0 0 red,
2em -2em 0 0 red,
-3em -1em 0 0 red,
-2em -1em 0 0 red,
2em -1em 0 0 red,
3em -1em 0 0 red,
-4em 0 0 0 red,
-3em 0 0 0 red,
3em 0 0 0 red,
4em 0 0 0 red,
-5em 1em 0 0 red,
-4em 1em 0 0 red,
4em 1em 0 0 red,
5em 1em 0 0 red,
-5em 2em 0 0 red,
5em 2em 0 0 red,
-5em 3em 0 0 red,
-3em 3em 0 0 red,
3em 3em 0 0 red,
5em 3em 0 0 red,
-2em 4em 0 0 red,
-1em 4em 0 0 red,
1em 4em 0 0 red,
2em 4em 0 0 red;

background: red;
width: 1em;
height: 1em;
overflow: hidden;

margin: 50px 0 70px 65px;
}

CSS Code:

.yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: #ab040b;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}

.yin-yang:before {
content: “”;
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid #ab040b;
border-radius: 100%;
width: 12px;
height: 12px;
}

.yin-yang:after {
content: “”;
position: absolute;
top: 50%;
left: 50%;
background: #ab040b;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}

CSS Code:

.facebook-iconCSS {
background: red;
text-indent: -999em;
width: 100px;
height: 110px;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 15px solid red;
border-bottom: 0;
}
.facebook-iconCSS::before {
content: “/20”;
position: absolute;
background: red;
width: 40px;
height: 90px;
bottom: -30px;
right: -37px;
border: 20px solid #eee;
border-radius: 25px;
}
.facebook-iconCSS::after {
content: “/20”;
position: absolute;
width: 55px;
top: 50px;
height: 20px;
background: #eee;
right: 5px;
}




Pin It on Pinterest

Share This