I dont kmow how to explain this, if this is a design question please correct me. Look at the following facebook header.
That friend requests icon and sort look like they are inside the background, how do i do this with css?
You could do something like this (Just whipped it up, so it's not perfect).
I used colours from the Facebook image you provided.
Here is what I did:
HTML:
<div id="container">
<div id="inset"></div>
</div>
CSS:
#container{
height:200px;
width:200px;
background:#48639b;
}
#inset{
background:#31497e;
height:50px;
width:50px;
box-shadow:inset 0px 0px 5px #1f2f50;
}
JSFiddle -- Try one
JSFiddle -- Try two
The JSFiddle as a few extra styles to put #inset more into the container, but they don't affect the over style of the inset.
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
button
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/
Use multiple box-shadows to give the embossed effect.
box-shadow:inset 0 1px 1px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.3);
http://jsfiddle.net/Em97N/2/
You should color the image, with a more dark color than the forground. Simple design. Maybe add a black border arround it.
Related
I'm trying to create a multiple color background to implement this:
And right now I managed to do this:
What I did:
Desired Background:
I'm trying to do it using gradients, but it seems that it's not possible to combine two gradients to do that. (It's possible to do other things, but not this).
Is there a way to implement this backgorund?
Thanks!
Try this (adjust the percentage and colors as your needs):
.yourdiv{
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 70%, #f1f1f1 70%, #f1f1f1 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0 );
}
DEMO HERE
i am guessing u need the darker grey section in the desired output to be shown? if so i would suggest to divide it into sections and give individual background.
if u can post some code. i would be happy to help.
Okay, not sure if this is exactly what you want but this is how I'd do psd to css/html. See screen shot below.
Also a WORKING DEMO HERE
Just wrap the whole card in a div and apply a left border would do the trick.
border-left-width: 8px;
border-left-color: rgba(10, 255, 80, 0.75);
border-radius: 5px;
You may remove the box shadow if you don't want, just feel move active with it.
At the end, I managed to do it with this:
This for the GREEN part:
.assignment-item {
padding: 5px 5px 0px 10px !important;
margin:15px auto;
border-radius: 8px;
background: linear-gradient(to right, #4f8b2b 0%,#4f8b2b 2%,#ffffff 2%,#ffffff 100%, transparent) !important;
}
This for the GREY part:
.assignment-item:before{
position:absolute;
z-index:-1;
bottom:0;
left:2%;
width:100%;
height:25%;
content:"";
background-color:#f2f2f2;
}
Here is the result:
I have an image that i want to use as a button on my page that links to other pages. I want to make it in a way that I can use small and large texts on it.
The image in question:
I have tried something but can go no where with it.
a {
background:url(http://i.imgur.com/8Isga60.png);
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
padding:30px 100px;
height:20px;
color:black;
font-size:16px;
}
JS Fiddle
I would recommend you drop the image idea... that concept is very 2005. With today's CSS you can easily recreate that image with pure CSS, which then is much more flexible.
If you Google "CSS button generator" you will find many online tools that help you with that... i.e. http://www.cssbuttongenerator.com/
Here is an example I did in 10 seconds and just copied the CSS they provided... granted it is a little convoluted, but it certainly works:
<style type="text/css">
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}.classname:active {
position:relative;
top:1px;
}</style>
You could almost do it in CSS3: JSFiddle Demo
.btn {
margin:10px;
color:white;
font-size:16px;
border:4px solid #c5c7c9;
border-radius: 50px 50px;
display:inline-block;
/* Drop shadow */
-webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.68);
-moz-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.68);
box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.68);
/* Gradient Background */
background: rgb(78,186,234); /* Old browsers */
background: -moz-linear-gradient(left, rgba(78,186,234,1) 0%, rgba(0,121,183,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(78,186,234,1)), color-stop(100%,rgba(0,121,183,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ebaea', endColorstr='#0079b7',GradientType=1 ); /* IE6-9 */
}
/* Button Sizes. */
.btn.large { padding:30px 60px; }
.btn.small { padding:10px 30px; }
HTML
my text here
my text here
my text here long text goes here
I think you will have to split the image, as If you try to repeat it using it as a complete image, it will also repeat the rounded parts. So take the left and right, and a pixel from the center. See this answer for reference Button using three (3) background images css
The old school version is something like using three classes for left and right and one for center with the repeating background.Create button using 3 images
Now, as mentioned in the comments, unless you are completely decided on the background images part, a pure CSS solution will probably work better.
Try this:
a{
background:url(http://i.imgur.com/8Isga60.png) no-repeat center;
...
}
However it moves the button too. jsfiddle
You should really look into CSS buttons instead of using images. Try CSS Button Generator
The problem is the left & right padding, Why not separate the link and the text so it's easy to center the content?
(edit: jsfiddle )
<p><a class="sol" href="http://imgur.com/8Isga60"><span>Does not work with larger text</span></a></p>
a.sol {
background:url(http://i.imgur.com/8Isga60.png);
display:inline-block;
padding:30px 0px;
width: 243px;
height:20px;
color:white;
font-size:16px;
text-align: center;
}
I'm trying to achieve a rectangle button with a transparent mask over the bottom right, as per this fiddle:
http://jsfiddle.net/c6gUX/
body {
background: #fff;
padding: 5em;
}
.button {
color: #FFFFFF;
font-family: 'RalewayRegular', Arial,sans-serif;
font-size: 1em;
padding: 0.5em 1.2em 0.5em 0.8em;
position: relative;
text-decoration: none;
}
.button:hover {
background: linear-gradient(to bottom, #FFA13E 0px, #E56204 100%) repeat scroll 0 0 transparent;
color: #FFFFFF;
}
.button:after {
background: url(http://i.imgur.com/8Vvw1Sw.png) no-repeat scroll 0 0 transparent;
bottom: -12px;
content: " ";
height: 38px;
position: absolute;
right: -12px;
width: 36px;
z-index: 99;
}
.orange-grad {
background: #ffa13e; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYTEzZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjc4MDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY3ODA1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, #ffa13e 0%, #ff7805 100%, #ff7805 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa13e), color-stop(100%,#ff7805), color-stop(100%,#ff7805)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa13e', endColorstr='#ff7805',GradientType=0 ); /* IE6-8 */
}
As you can see, i've achieved it with a quite hacky way. I've untested this cross-browser and suspect IE to mess it up without a shim for :after, etc.
How can I achieve this cross-browser modern? How can I make it work when overlayed onto an image so it's effectively transparent? (See below image)
From PSD:
My fiddle on an image:
Logically I know that IE6/7 will need an image and i'm kinda OK with that.
Word length. Sometimes the button doesn't have 'Read more', so need a 100% width solution.
Edit
I am thinking of using a Sprite. (http://i.imgur.com/z0UYpTX.png)
This is tricky - particularly with your combination of a gradient with the beveled corner. The closest I could get is this fiddle, which makes use of CSS gradients to achieve the effect you're after, based on Lea Verou's awesome article.
The relevant CSS is:
.button {
background: #ffa13e; /* fallback */
background: -webkit-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
background: -moz-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
background: -o-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
background: linear-gradient(315deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
}
That's the only way to get the background image to show through (that I know of). The drawback is that the gradient is not your linear one from top to bottom, but at an angle. I don't think it's possible to combine multiple gradients to match your visual precisely. But it is pretty close:
I'd suggest that this is the perfect candidate for progressive enhancement - older IE will get a solid background colour but that's perfectly acceptable (i.e. I wouldn't personally bother trying for an image fallback).
Note: there have been numerous changes between the Working Draft and the Candidate Recommendation for the gradient syntax, one of which is the angle of the gradient:
From the IE Blog. Hence the unprefixed version requires a different deg value.
Make use of it..... I think this will help You.. use it with ur image.. this will solve cross-browser issue...
http://jsfiddle.net/Praveen16oct90/2bZAW/1095/
div {
width:200px;
height:80px;
background: red;
top:150px;left:100px;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 40px; right: 0;
border-right: 40px solid white;
border-top: 40px solid red;
width: 20;
}
so i've been having a really tough time after a month away from HTML, not much whatsoever, however I seem to have lost the knack with something, and that's getting my div/any html element to not be a few pixels from top of a page and even with a fixed div, it is still around 8 pixels away from the top and left of my page and I have no idea what is going on. There's no padding, no margin, nothing like this and I am utterly perplexed at why this is happening.
<html>
<head>
<title>
CrystalBallStories
</title>
<link rel=stylesheet link="stylesheet" href="style.css" media="screen">
</head>
<body>
<div id="main">
<nav id="nav">
<div class="nav_opt">
Home
</div>
</nav>
</div>
</body>
</html>
Is the HTML and the CSS is:
html
{
font-family:Corbel, 'Lucida Grande', Helvetica, sans-serif;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
#main
{
background-color:#000000;
position:fixed;
height:98%;
width:80%;
color:#DDDDDD;
overflow-y:scroll;
text-wrap:break-word;
margin-left:10%;
margin-right:10%;
border-top-left-radius:30px;
border-top-right-radius:10px;
}
#nav
{
background-color:rgba(69,72,77,0.8);
height:8%;
}
This used to all work for me before but it is, for some reason, a little away from the top and left as I said before, as can be seen on the site: http://www.crystallballstories.com
Any help is appreciated as this is driving me insane!
html,body{margin:0}
Problem solved.
I am developing a website using html , css and javascript . The buttons display differently in every browser . Here are the screenshots for different browser of the same page :
Internet Explorer :
Firefox :
I actually intend it to display as it displays in firefox . Here Some of the css code i am using :
#button{
float: left;
width: 500px;
height: 50px;
line-height: 50px;
background-color: #06C;
padding-left: 20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #60B842),
color-stop(0.85, #7FD13D)
);
background-image: -moz-linear-gradient(
center bottom,
/* change these to change the button colors */
#B58515 0%,
#DC9E1F 85%
);
/* change this to change the text color and font type */
color:#fff;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
text-shadow:1px 1px 1px #4c9434;
}
#button:hover{
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #6DD14B),
color-stop(0.85, #85DB40)
);
background-image: -moz-linear-gradient(
center bottom,
/* change these colors to change the mouse hover colors */
#E17100 0%,
#FF9326 85%
);
box-shadow:0 2px 0 #5EA839;
}
There maybe some issues with using the gradient . Can someone suggest me any changes or another ways to code so that the webpage looks the same in different browsers ?
I usually use Colorzilla's Ultimate CSS Gradient Generator to generate cross browser CSS gradient code.
Apart from -webkit-gradient() and -moz-gradient() you also need to use the prefixes for IE and other browsers.
Example:
#linearBg2 {
/* fallback */
background-color: #1a82f7;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);
}
Source
Read more here
Note that IE 9 and earlier do not support gradient.
What's happening is that IE ignores your gradient css completely. You have to add a 'filter' in order for the gradient to appear in IE.
This page will help you create a cross-browser gradient.
All browser Support gradient property
use this
background: -moz-linear-gradient(top, white, #1a82f7);/*Mozila*/
background: -o-linear-gradient(top, white, #1a82f7); /*opera*/
background: -webkit-linear-gradient(top, white, #1a82f7);/*Chrome and safari*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#1a82f7'); /*IE*/
Here is a set of CSS gradients that will be useful for you for cross-browser compatibility:
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);