CSS how to make icons look like they are inside the backround


Tags: html,css,icons,photoshop

Problem :

I dont kmow how to explain this, if this is a design question please correct me. Look at the following facebook header.enter image description here

That friend requests icon and sort look like they are inside the background, how do i do this with css?



Solution :

You can accomplish the sort button styling, by using box-shadow - and inset to get the shadow inside the button. As well as border-radius for rounding the corners.

HTML

<a href="#" class="button">button</a>

CSS

body { background:#4b669d; padding:40px; 
       font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}

a { 
    display:inline-block; 
    font-size:12px;
    padding:0 20px;
    margin:10px;
    height:30px; 
    background:#435c91; 
    border:1px solid #2a3349; 
    text-align:center;
    color:#fff;
    line-height:26px;
    text-decoration:none;

     border-radius:5px;

/* this is the inner shadow and drop shadow */    
-webkit-box-shadow:inset 0 0 3px 2px rgba(0,0,0,0.15), 1px 1px 0px 1px rgba(255,255,255,0.3);
box-shadow:inset 0 0 3px 2px rgba(0,0,0,0.15), 1px 1px 1px 0px rgba(255,255,255,0.3);

/* gradient - from http://www.colorzilla.com/gradient-editor/ */
background: rgb(93,114,163); /* Old browsers */
background: -moz-linear-gradient(top, rgba(93,114,163,1) 0%, rgba(46,72,128,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(93,114,163,1)), color-stop(100%,rgba(46,72,128,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(93,114,163,1) 0%,rgba(46,72,128,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(93,114,163,1) 0%,rgba(46,72,128,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(93,114,163,1) 0%,rgba(46,72,128,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(93,114,163,1) 0%,rgba(46,72,128,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d72a3', endColorstr='#2e4880',GradientType=0 ); /* IE6-9 */
}

Obviously it requires a bit more tweaking, but hopefully that should be a starting point.

JSFiddle Demo 2 - now with gradient background and a drop-shadow too.

and http://jsfiddle.net/53fWz/6/


    CSS Howto..

    how to set background-image to pseudo element?

    CSS How to keep bodies of html file and included files from merging?

    How to stop loading pdf on mobile device?

    How to understand other people's CSS architectures?

    How do i hide html until its processed with javascript?

    How to assign custom CSS to Sharepoint site

    How to get list of Css class use in the HTML file?

    How to make arrow in CSS with angle?

    How to make jQuery UI nav menu horizontal?

    How does bootstrap restrict minimum page width to 400px

    Image won't show up html + css

    How to Indent using HTML or CSS

    How to change floating div's width to fill all the space they occupy?

    How to enable bootstrap 4 flex?

    How to center two pieces of text using CSS and Bootstrap?

    How to enable CSS editing in Intellij

    How can I use CSS to add a blank column between paired column groupings?

    ValidationSummary and ValidationMessageFor with custom CSS shown when no errors present

    How to create a dropdown with lu and li tags like this

    How to set transition from JavaScript while still inheriting style from CSS [closed]

    How can I put a graphic marker next to an item using pure CSS?

    How do I light up an entire single row by hovering on a span in one of the columns?

    hide/show html div with javascript

    How to remove inherited styles using jQuery?

    How to maintain the background image until end of the page

    How do I center the twitter bootstrap tabs on the page?

    How to repeat multiple images over one element using CSS

    How to have multiple CSS color transitions on a single text line?

    How can I add a gradient overlay to an image that is set in a style attribute in css?

    How to override GWT obfuscated style for DataGrid header