Does anyone know if it's possible to draw this red shape for title background in CSS only ?
I need to have this with different width for different title lenght.
Thank you !
Manue
If border-radius seems fine to you, you may tune each corners in 2 ways to get a shape alike :
see for more information : https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
example possible below
h1 {
display: table;
margin: 0.1em auto;
font-size: 45px;
font-family: cursive;
text-transform: uppercase;
padding: 0.25em 0.5em;
background: #D71E19;
color: white;
/* below the values you want to tune to round and cut off corners */
border-radius: 0.75em 0.5em 0.65em 0.5em / 25px 22px 100px 50px;
}
h1 + h1 {
/* borders or shadow will follow the shape edge */
margin-top:10px;
box-shadow:0 0 0 4px pink, 0 0 4px 3px black, inset 0 0 2px black;
text-shadow:1px 1px 2px gray, -1px -1px 2px #333;
}
<h1>Title experiment</h1>
<h1>shadow & border</h1>
Related
Im using a div to have a gradient background on a tittle on my weppage.
When using "border" property in CSS the text get pushed out of the div.
I have tried to changue size, take out radius-border etc...
#TextKeyboard {
height: 26px;
width: 330px;
text-transform: uppercase;
text-align: left;
background: -webkit-linear-gradient(#615bff, #262544);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#615bff, #262544);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#615bff, #262544);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#615bff, #262544);
margin-top: 20px;
margin-left: 20px;
padding-left: 10px;
border-radius: 12px;
border: 1px solid;
}
h3 {
color: #f6b824;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
http://jsfiddle.net/t5w7wuay/ here a jsfiddle of my code.
Thanks.
There are predefined styling on some elements, like h3.
To fix your button add this to yout h3 rule:
margin: 0;
padding: 0;
Edit:
Advice: Use a reset.css like you can find here
it clears every predefined style and gives you the full controll of your styling.
Just add margin:0; to your h3 class:
h3 {
color: #f6b824;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
margin: 0;
}
JSFIDDLE: http://jsfiddle.net/ghorg12110/t5w7wuay/1/
Ok, so I wish to create something like http://i.imgur.com/jox0ENW.jpg. But be of a modular type, where I might have a button class that'll make it look like that, and a class I can use to apply to sections.
Right now I have:
.double-drop {
position: relative;
padding: map-get($padding, xl);
margin-top: (-1 * 280px);
border: 3px solid $black;
background-color: $white;
&:before {
content: '';
position: absolute;
z-index: -1;
top: (-1 * map-get($padding, m));
right: (-1 * map-get($padding, m));
width: 100%;
height: 100%;
border: 3px solid $black;
background-color: $lighter-grey;
}
}
Which works, and creates that effect on sections. But not if the section is inside a parent which is absolutely positioned. (the drop shadow goes behind..)
I would like to imitate that effect in the image, for all my buttons, and obviously transition its translate so it moves or what not.
Would it be possible first of all?
Multiple Borders on CSS Only Button
Perhaps using multiple shadows as borders would be a simple solution? It degrades gracefully in browsers that don't support it, and it's easy to work with.
JSFiddle Example
.shadow-button {
padding:10px;
border:solid 3px #000000;
display:inline-block; /* used only to shrink wrap the div around the contents, has a default margin */
-webkit-box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
-moz-box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
box-shadow:8px -8px 0px -2px #cccccc, 8px -8px 0px 1px #000000;
font-family:Verdana, Tahoma, Arial, sans-serif;
font-weight:bold;
}
p {padding:10px;}
<div class="shadow-button">PLAY MUSIC VIDEO</div>
Browser Support: http://caniuse.com/#search=box
Is it possible to create a button that look like this in CSS:
Of course I don't mean using an image as background, I can easily do that. I'm talking about the webkit type of solution.
The short answer is yes, it can be done. I went ahead and gave it a shot.
These are the steps I took:
I opened your bitmap in Sketch, my favorite graphical tool for all things web
I zoomed in to your bitmap, traced the outline with a rounded rectangle and gave it the correct color
I started adding box-shadows, both outside and inset, to replicate the bitmap as close as possible. Note that I only used black and white (with varying alpha values) for the box shadows. This way you can easily change the color of the button by just changing the background-color.
I also added two extra shapes for the bottom shadow and the top glow, as I did not manage to get this right with just box shadows. As long as it are just 2 elements that should not be a problem however, you can use the :before and :after pseudo elements to include these in your css.
The resulting image looks something like this (not exact, but pretty close I think):
And then I translated the drawing to css, by choosing 'copy css attributes' and manually adding the :before and :after elements and doing some fine tuning. This is the (unprefixed) css I came up with:
.button {
display: inline-block;
color: #fff;
text-shadow: 0 0 2px rgba(0,0,0,.3);
font-family: sans-serif;
box-shadow:
inset 0 0 2px 0 rgba(255,255,255,.4),
inset 0 0 3px 0 rgba(0,0,0,.4),
inset 0 0 3px 5px rgba(0,0,0,.05),
2px 2px 4px 0 rgba(0,0,0,.25);
border-radius: 4px;
padding: 8px 16px;;
font-size: 12px;
line-height: 14px;
position: relative;
}
.button.red { background: #EA3D33; }
.button.green { background: #7ED321; }
.button.blue { background: #4A90E2; }
.button:before, .button:after {
content: '';
display: block;
position: absolute;
left: 2px;
right: 2px;
height: 3px;
}
.button:before {
top: 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: rgba(255,255,255,.6);
box-shadow: 0 1px 2px 0 rgba(255,255,255,.6);
}
.button:after {
bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: rgba(0,0,0,.15);
box-shadow: 0 -1px 2px 0 rgba(0,0,0,.15);
}
and a fiddle to demonstrate: http://jsfiddle.net/pn4qk3wL/
This question already has answers here:
Two color borders
(12 answers)
Closed 1 year ago.
With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner Shadow.
On the Web Design concern, if I have design like the image below, how can I achieve that with CSS? Is it really possible?
NOTE: I'm giving two borders to the white element: the outer border is white, and the inner border is greyish. Together, they create a dynamic look so that it feels like an inset element, and the white element is pillow embossed. So thing is a bit:
div.white{
border: 2px solid white;
border: 1px solid grey;
}
But you know it's a double declaration, and is invalid. So how can I manage such thing in CSS?
And if I put border-style: double then you know I can't pass two different color for the singe double border.
div.white{
border: double white grey;
}
Additionally, I'm familiar with LESS CSS Preprocessor. So if such a thing is possible using CSS Preprocessor, please let me know.
Alternatively, you can use pseudo-elements to do so :) the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
padding: 2em;
width: 16em;
height: 16em;
position: relative;
margin: 0 auto;
}
.double-border:before {
background: none;
border: 4px solid #fff;
content: "";
display: block;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
pointer-events: none;
}
<div class="double-border">
<!-- Content -->
</div>
If you want borders that are consecutive to each other (no space between them), you can use multiple box-shadow declarations (separated by commas) to do so:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
box-shadow:
inset 0 0 0 4px #eee,
inset 0 0 0 8px #ddd,
inset 0 0 0 12px #ccc,
inset 0 0 0 16px #bbb,
inset 0 0 0 20px #aaa,
inset 0 0 0 20px #999,
inset 0 0 0 20px #888;
/* And so on and so forth, if you want border-ception */
margin: 0 auto;
padding: 3em;
width: 16em;
height: 16em;
position: relative;
}
<div class="double-border">
<!-- Content -->
</div>
I use outline a css 2 property that simply works. Check this out, is simple and even easy to animate:
.double-border {
display: block;
clear: both;
background: red;
border: 5px solid yellow;
outline: 5px solid blue;
transition: 0.7s all ease-in;
height: 50px;
width: 50px;
}
.double-border:hover {
background: yellow;
outline-color: red;
border-color: blue;
}
<div class="double-border"></div>
you can add infinite borders using box-shadow using css3
suppose you want to apply multiple borders on one div then code is like:
div {
border-radius: 4px;
/* #1 */
border: 5px solid hsl(0, 0%, 40%);
/* #2 */
padding: 5px;
background: hsl(0, 0%, 20%);
/* #3 */
outline: 5px solid hsl(0, 0%, 60%);
/* #4 AND INFINITY!!! (CSS3 only) */
box-shadow:
0 0 0 10px red,
0 0 0 15px orange,
0 0 0 20px yellow,
0 0 0 25px green,
0 0 0 30px blue;
}
Use of pseudo-element as suggested by Terry has one PRO and one CON:
PRO - great cross-browser compatibility because pseudo-element are supported also on older IE.
CON - it requires to create an extra (even if generated) element, that infact is defined pseudo-element.
Anyway is a great solution.
OTHER SOLUTIONS:
If you can accept compatibility since IE9 (IE8 does not have support for this), you can achieve desired result in other two possible ways:
using outline property combined with border and a single inset box-shadow
using two box-shadow combined with border.
Here a jsFiddle with Terry's modified code that shows, side by side, these other possible solutions. Main specific properties for each one are the following (others are shared in .double-border class):
.left
{
outline: 4px solid #fff;
box-shadow:inset 0 0 0 4px #fff;
}
.right
{
box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}
LESS code:
You asked for possible advantages about using a pre-processor like LESS. I this specific case, utility is not so great, but anyway you could optimize something, declaring colors and border/ouline/shadow with #variable.
Here an example of my CSS code, declared in LESS (changing colors and border-width becomes very quick):
#double-border-size:4px;
#inset-border-color:#fff;
#content-color:#ccc;
.double-border
{
background-color: #content-color;
border: #double-border-size solid #content-color;
padding: 2em;
width: 16em;
height: 16em;
float:left;
margin-right:20px;
text-align:center;
}
.left
{
outline: #double-border-size solid #inset-border-color;
box-shadow:inset 0 0 0 #double-border-size #inset-border-color;
}
.right
{
box-shadow:0 0 0 #double-border-size #inset-border-color, inset 0 0 0 #double-border-size #inset-border-color;
}
You can use outline with outline offset
<div class="double-border"></div>
.double-border{
background-color:#ccc;
outline: 1px solid #f00;
outline-offset: 3px;
}
Maybe use outline property
<div class="borders">
Hello
</div>
.borders{
border: 1px solid grey;
outline: 2px solid white;
}
https://jsfiddle.net/Ivan5646/5eunf13f/
Try below structure for applying two color border,
<div class="white">
<div class="grey">
</div>
</div>
.white
{
border: 2px solid white;
}
.grey
{
border: 1px solid grey;
}
You can use the border and box-shadow properties along with CSS pseudo elements to achieve a triple-border sort of effect. See the example below for an idea of how to create three borders at the bottom of a div:
.triple-border:after {
content: " ";
display: block;
width: 100%;
background: #FFE962;
height: 9px;
padding-bottom: 8px;
border-bottom: 9px solid #A3C662;
box-shadow: -2px 11px 0 -1px #34b6af;
}
<div class="triple-border">Triple border bottom with multiple colours</div>
You'll have to play around with the values to get the alignment correct. However, you can also achieve more flexibility, e.g. 4 borders if you put some of the attributes in the proper element rather than the pseudo selector.
Does anyone know the CSS required to add an outer border around textboxes like this example from Twitter?
Thanks for the help
outline:
input{outline:solid 4px #ccc}
(another option it to wrap the input with div of course)
You can use the box-shadow property
http://jsfiddle.net/VXJdV/
input {
display: block;
margin: 2em;
box-shadow: 0 0 10px gray;
}
input[type="text"],input[type="password"]{
border: solid 1px #ccc;
padding: 4px;
border-radius:4px;
}
You'll want to cover the other border radius too, -moz- & -webkit-
Demo: http://jsfiddle.net/BqpZh/
.classname
{
box-shadow:0 0 2px red
}
use this class or you and add box-shadow property to your existing class. You can increase 2px to 5px or 10 for broder shadow
.front-card .text-input:focus {
border:1px solid #56b4ef;
-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6)
}
Using box shadow will help you like this:
class{
box-shadow: horizontal vertical blur-radius spread-radius color;
box-shadow:2px 0 3px 5px red;
}
horizontal (-value will move towards left) (+value on right)
vertical (-value will move upwards) (+value on downwords)
blur-radius: will blur the color you choose around box
spread-radius: will spread color to the chosen distance
You can use a wrapping div outside of the input box and give it that background color and rounded corners!
HTML:
<div class="outter"><input class="inputbox"></input></div>
CSS:
.outter {
margin: 20px;
padding: 10px;
border-radius: 15px;
background-color: red;
display: inline-block;
}
.inputbox {
border-radius: 5px;
}
Here you have a jsfiddle: http://jsfiddle.net/dsBgw/
You can consider using multiple shadows:
input[type="text"]{
box-shadow: 0 2px 2px rgba(0,0,0,0.2),
0 1px 5px rgba(0,0,0,0.2),
0 0 0 12px rgba(255,255,255,0.4);
}
i have a demo, it it like the login form for twitter. if you want to view, pls click here.