I am very much impressed by the "inset" like effect in many latest websites. Some examples are
and
The line in the center. Nowadays, many websites use these kinds of lines/effects.
I tried to achieve the same with borders but the color combination is not working me and it is not proper.
Do other websites use images for these ? is it easy to this ?
Any example css ?
Example sites:
http://woothemes.com, http://net.tutsplus.com/ , http://www.w3schools.com (in the header) and in wordpress admin page sidebar
Don't know if this will help, but using 1 px borders that are slightly lighter and darker than the background of 2 adjacent elements can emulate this. For Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type="text/css">
div{background:#555;}
.top{border-bottom:#333 solid 1px;}
.bot{border-top:#777 solid 1px;}
</style>
</head>
<body>
<div class="top">this</div>
<div class="bot">andthis</div>
</body>
</html>
EDIT:
As a side note, switching light and dark in the example above will give you a slightly raised/embossed border effect.
Using an <hr> is quite clever.
Following up on user1302036’s answer, all we need is to set the color of the top and bottom borders for an <hr> and set the left and right border widths to 0.
hr {
border-width: 1px 0px;
border-color: #666 transparent #ccc transparent;
}
Use border-bottom and box-shadow.
body {
background-color: #D0D9E0;
}
h1 {
border-bottom: 1px solid #EFF2F6;
box-shadow: inset 0 -1px 0 0 #AFBCC6;
}
Check out the Fiddle and Browser Compatibility for box-shadow property.
3D effects in 2D computer displays are mere optical effects accomplished by the use of colour: lighter variations suggest bright (higher areas) and darker variations suggest shadown (lower areas). Most people is right-handed and writing lights tend to be on the left side of the desktop, so you use an imaginary source of light in the left top corner of the screen.
It's been possible to do it with pure CSS in rectangular areas for years:
body{
background-color: #8080C0;
}
div{
display: inline-block;
margin: 1em;
padding: 1em;
width: 25%;
color: white;
background-color: #8080C0;
}
div.outset{
border-width: 1px;
border-style: solid;
border-color: #A6A6D2 #4D4D9B #4D4D9B #A6A6D2;
}
div.inset{
border-width: 1px;
border-style: solid;
border-color: #4D4D9B #A6A6D2 #A6A6D2 #4D4D9B;
}
<div class="inset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="outset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
Fonts, however, require newer CSS attributes that don't have wide support yet and, also, do not allow to provide more than one colour, so it's common to use images. See http://www.quirksmode.org/css/textshadow.html
this is css text shadow property.for get this effect use
.style{
text-shadow:0 1px #FFFFFF;
}
but really this is effect of color combination that you are using in background and text.
so you should do.
use text shadow color dark than background color.
use text shadow color light than text color.
Easiest, draw an horizontal rule with the following styles, contrast can be modified depending on background color:
hr {
background-color: #000;
border-top: solid 1px #999;
border-left: none;
height:0px;
}
Here is a more current and flexible solution that can be used.
JSFIDDLE
.hr {
background: rgba(0, 0, 0, 0.6);
height: 1px;
width: 100%;
display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
<span class="hr"></span>
By using RGBA(Red, Green, Blue, Alpha) you can use white/black with an alpha(opacity) to make the illusion of an inset effect.
Simply do the following:
.hr {
opacity: 0.2;
border-top: 1px solid #000;
border-bottom: 1px solid #fff;
}
Play with opacity and colors to suit your design, It works on all backgrounds I think ;)
Related
I am currently tasked to create checks inside of a pandas DataFrame table of different colors when certain data is showing.
I was able to find the following:
<p>I will display <span style="color:green">✔</span></p>
<p>I will display <span style="color:yellow">✔</span></p>
While this works per se ... It would be nice to have them bigger if possible, or at least a border around the check itself (not a box around it).
Clearly this is not the way to go since it's an ASCII character, so curious if anyone had found a similar need. Google only returns checkbox information, not a check.
Just use text-shadow to add a border around your tick-mark icon. Also, you can further improve readability by increasing the size of the icons.
Check the Code Snippet below for a practical example of using text-shadow and increasing the icon size:
p:nth-child(1) span {color:green; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-size: 50px;}
p:nth-child(2) span {color:yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
<p>I will display <span>✔</span></p>
<p>I will display <span>✔</span></p>
You can create a box by border and make the font-size change as done in the snippet.
Another option is you can Search google with keywords checkbox fafa icon or check icon fafa
<p>I will display <span style="border: 1px solid black;font-size: 50px;color:green">✔</span></p>
<p>I will display <span style="color:yellow">✔</span></p>
An approach with better reusability would be to create the checkmark via a CSS class on a pseudo element ::before or ::after:
.checkmark-before::before,
.checkmark-after::after {
content: "✔";
color: orange;
display: inline-block;
vertical-align: middle;
text-align: center;
}
.checkmark-before.x2::before,
.checkmark-after.x2::after {
font-size: 2em;
}
.checkmark-before.bordered::before,
.checkmark-after.bordered::after {
text-stroke: 1px #a00;
-webkit-text-stroke: 1px #a00;
width: 1.2em;
}
.checkmark-before.yellow::before,
.checkmark-after.yellow::after {
color: yellow;
}
<button class="checkmark-after" type="button">I will display </button>
<p class="checkmark-before x2"> Done!</p>
Google
<p class="checkmark-before x2 checkmark-after yellow bordered">Combined!</p>
Its a mystery to me how the 1px borders around the cells of this table are very thin, but if I copy the exact style:
border-right: solid 1px #E0E0E0;
border-bottom: solid 1px #E0E0E0;
It looks twice as thick. I cant see anything thats causing these borders to look nicer and sharper. Why are they thinner?
EDIT:
We worked out that google has somehow made the 1px border to 0.5px, it doesnt matter how, you can just set it:
border: 0.5px solid #ccc;
I have a small screen laptop with very high resolution (high pixel density), so I can see the difference between the half and one pixel borders here: https://jsfiddle.net/pd9hkd4j/2/
Most people in tech / gaming spheres do have a full HD screen / monitor, but also have a larger screen and therefore slightly lower pixel density, so their monitor does not render 0.5px and 1px differently.
It may be that Google has not intentionally tried to have a thinner border, and its just a circumstance of a minority of screens.
It is a very bright border-color on a white background. Maybe you try to set the border-color to a different background-color? panther is correct with his comment, 1px is 1px, but with some optical tricks, you can make the border appear thinner, than it actually is.
Take a quick look at the example below: Both <div> at the top contain a <div> with the same border-color and thickness. But the one on the black background seems to be much thicker, since the contrast between the border and the background is very high.
On the bottom there is a white background with some different borders, and you will probably notice, that the lighter ones look thinner, than the dark ones. It is just an optical trick, Google is using to play with the appearance :-)
Edit:
It turned out, that o0o0o0o0o actually has a high DPI Display, which is able to display "half pixels" since 1px width is not necessarily equal to one pixel of the display on high DPI Settings. So you actually can set the border width to a float value, but it obviously will only be visible to users with higher DPI Displays. A "regular" Monitor will show it as 1px, since its not possible to display half pixels (which also is kind of obvious ;) )
.wrapper {
float: left;
width: 30%;
height: 300px;
padding: 30px;
}
.black {
background: black;
}
.white {
background: white;
}
.border {
border: solid 1px #E0E0E0;
padding: 10px;
}
.bottom {
clear: both;
background: white;
width: 60%;
padding: 60px;
height: 200px;
}
.bottom div {
margin-bottom: 30px;
}
.border-10 {
border-bottom: 1px solid #efefef;
}
.border-30 {
border-bottom: 1px solid #ccc;
}
.border-50 {
border-bottom: 1px solid #a0a0a0;
}
.border-70 {
border-bottom: 1px solid #707070;
}
.border-90 {
border-bottom: 1px solid #383838;
}
<div class="wrapper black">
<div class="border">
Lorem Ipsum
</div>
</div>
<div class="wrapper white">
<div class="border">
Lorem Ipsum
</div>
</div>
<div class="bottom">
<div class="border-10"></div>
<div class="border-30"></div>
<div class="border-50"></div>
<div class="border-70"></div>
<div class="border-90"></div>
</div>
I want to know the difference between border styles- ridge and groove. When i used them, i was not able to spot the difference between the two. I cannot upload the image since i have not reached level 10 to make it more clear. Here's the code:
border-style: groove ridge dashed groove;
It's border shadow position:
Ridge: from top left
Groove: from bottom right
div {
padding: 10px;
margin: 10px;
float: left;
background-color: white;
}
.wrap {
background-color: #ffdddd;
}
#ridge {
border-width: 5px;
border-style: ridge;
margin-right: 1px;
}
#groove {
border-width: 5px;
border-style: groove;
margin-left: 1px;
}
<div class="wrap">
<div id="ridge">ridge</div>
<div id="groove">groove</div>
</div>
The difference is defined in somewhat vague terms in the CSS 2.1 specification:
groove
The border looks as though it were carved into the canvas.
ridge
The opposite of 'groove': the border looks as though it were coming out of the canvas.
This allows various interpretations and implementations, and the visual effect is often not that clear. It tends to be clearer when the border is relatively wide. Typically browsers use two different colors to create the impression, the declared border color and a lighter color. This is meant to correspond to an idea of groove or ridge border when light is coming from the direction of the upper left corner. Example:
<style>
span { border: solid red 10px }
.groove { border-style: groove }
.ridge { border-style: ridge }
</style>
<span class=groove>groove</span>
<span class=ridge>ridge</span>
Here are some MDN docs on css border-style
According to this:
groove: Displays a border leading to a carved effect. It is the opposite of ridge.
Groove is a 3D effect that gives the impression that the border is carved into the canvas.
Ridge is a 3D effect that has the opposite effect of groove, in that the border appears to protrude from the canvas.
This link gives you a clear idea:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style
So I saw this http://cre8tivenerd.com/demos/css/Line-separator.html and wanted to create a divider with that "pressed" effect. The problem is, I don't have a clue of what the divider colors should be for me, tested it out and it didn't get the same effect. My background color is #222222. Anyone that can help me and maybe explain how I "calculate" which colors I should use for the divider?
You can easily get this effect like this:
<div class="vDivider"></div>
css:
.vDivider {
width: 80%;
height: 1px;
margin: 10px auto;
background: #434343;
border-bottom: 1px solid black;
}
The contrast between the background color and the bottom border creates this effect.
Here is a DEMO
It won't look good as #222 is already too dark. Only option as #Dim13i suggested is using black as bottom color, but it won't look distinct.
How about make it a little thicker?
.line-separator {
background: none repeat scroll 0 0 #777;
border-bottom: 2px solid #000;
height: 2px;
}
can anyone provide insight or a sample of how to create a css based bubble container for html to go inside it?
im looking to make a rounded table. that is to say i want the result to look like a table but with rounded edges. and it would be great to have a slight gradient inside as well.
i found one sample on this site: http://www.seekdotnet.com/
see on the right where they have the "We Are Here to Help!" section.
It is generally called rounded corners. You can do that using css only. Here is a great list of techniques. Also if you want to use javascript or jQuery in specific, there is a plugin for that called rounded corners (note: javascript is not a mandatory for doing what you want, but it is definitely a easy way).
The boxes can be given curvy or round corners using the border-radius attribute in CSS.
Example:
#myBtn {
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
box-shadow: 3px 3px 3px black;
}
#myBtn:hover {
background-color: orange;
}
#myBtn2 {
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
box-shadow: 3px 3px 3px black;
}
#myBtn2:hover {
background-color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title> Test </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="myBtn">
Button
</div>
The above is a button with curved corners.
<div id ="myBtn2">
Button
</div>
The above is a button with pointed corners.
</body>
</html>
The more the number of pixels in border-radius, the rounder the corners get.
To know more about border-radius, please visit https://www.w3schools.com/css/css3_borders.asp
Hope this helps...
Depends. if you need it to fully compatible with browsers that don't support CSS3, then try Here
if you want css3 rounded corners then try here for:
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
I may have misread the question and, if so, please accept my apologies.
As far as I can tell, the rounded corners in the example you give are, like I previously said in a comment, done by images. You should look into #Teja's answer as he points you in the right direction but, just for you reference, here goes the HTML and CSS used to recreate the layout you mention:
<div id="chat-panel"><h3>We Are Here to Help!</h3>
<p>We are extremely proud of our support and are available to help you at anytime.</p>
<span class="panel-bottom">
<a href="javascript: var e = window.open('http://livechatserver.seekdotnet.com/SightMaxAgentInterface/PreChatSurvey.aspx?accountID=1&siteID=1&queueID=2','chatWindow','width=490,height=404,resizable=0,scrollbars=no,menubar=no,status=no');">
<img alt="Click Here to chat with us" src="/images/button/btn_chat_new.gif">
</a>
</span>
</div>
#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}
#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}
#chat-panel p {
padding:0 10px;
}
#chat-panel .panel-bottom, #special-offer .panel-bottom {
background:url("http://www.seekdotnet.com/images/sidepanel_bottom.png") no-repeat scroll left bottom transparent;
display:block;
padding-bottom:10px;
}
after looking over all the notes here and searchign the web high and low i came to the conclusion that this is the best way to get rounded corners...
http://blog.benogle.com/2009/04/29/css-round-corners/
using lines of variable length to create the top and bottom curves.
feedback?
For browsers that support rounded corners, it's dead easy with a simple CSS function:
border-radius:10px;
To support older versions of Firexfox, you will need -moz-border-radius as well.
Internet Explorer doesn't support rounded corners in CSS, but you can use CSS3Pie as a hack to allow it to support them. See the CSS3Pie website for more info on exactly how to use it.
However note that rounded corners on a table element are likely to be problematic. You'll want to wrap your table with a <div> and put the rounded corners on that instead.
A CSS3 rounded corner example to get you started:
<div class="mysexaybox">
<p>Cos boxes were made to be sexay!</p>
</div>
.mysexaybox {
background: #ccc;
background: -moz-linear-gradient(top, #ddd, #bbb);
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
border: 1px solid #bbb;
color: #000;
padding: 4px 8px;
text-shadow:0 -1px 0 rgba(255, 255, 255, 0.4);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}
DD_roundies is a decent solution if you absolutely must support IE6-8 (IE9 will support the rounded corners above)
This is the best example and explanation I have seen of box with rounded corners.
The All-Expandable Box
There are many ways to do it, use this as some inspiration.