This question already has answers here:
How to center the <legend> element - what to use instead of align:center attribute?
(10 answers)
Closed 7 years ago.
How to put some text on a border div so that text has a transparent background that it matches the image behind?
The problem is that the background-image has some shapes and multiple colors, so I can't put just some background color the the text because it won't fit.
Example:
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0;
background: url(http://wallpoper.com/images/00/45/05/47/green-background-2_00450547.jpg);
}
#main {
margin-top: 100px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #000000;
}
#main h2 {
font-size: 60px;
font-weight: 700;
text-align: center;
margin: -40px 0 0;
background: transparent; /* somehow remove the border behind the text */
padding: 0 20px;
}
<div id="main">
<h2>Star players</h2>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</div>
JSFiddle
You can use a fieldset instead of a div:
HTML:
<fieldset>
<legend>Test</legend>
</fieldset>
CSS:
legend {
text-align: center;
width: 100%;
}
So you want to see one thing 2 layers behind the text but not the other thing that is between the two...that in itself is rather counter-intuitive. Not sure you will be able to do it unless you use a border image and css gradient which is always a little complicated and this won't be dependant on the size/width of the text.
e.g.
HTML
<div class="gradborder-box"><div class="inner"><h2>Hello WORLD</h2></div></div>
CSS
.gradborder-box{
margin: auto;
width: 350px;
background: transparent;
border: 2px solid transparent;
-webkit-border-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 68%, rgba(0,0,0,1) 100%);
border-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 68%, rgba(0,0,0,1) 100%);
border-image-slice: 1;
}
h2{font-size: 1.2em; text-align: center; margin-top: -10px;}
.inner{height: 150px; width: 100%; border-bottom: 2px solid #000; margin-bottom: -2px;}
CodePen
This has been done for CHROME - you will need to add in the correct border image tags for the other browsers (-moz-border-image, etc). This is CSS3 only.
Related
This question already has answers here:
Is it possible to have two background colors for a single html element? [duplicate]
(3 answers)
Closed 2 years ago.
So I have this button i am styling and I want it like this - If you can see it is red in color but has different shade of red starting from the bottom half of this element.
I wanted to enquire what exactly do I do to achieve this effect.
I currently have this after a few attempts:
That can be done using linear-gradient for more info about Linear gradient
Example:
button {
background: linear-gradient(to bottom, #e66465 50%, #9198e5 50%);
}
<button>
click me
</button>
Sometimes a gradient is all you need.
.button {
display: inline-block;
border-radius: 10px;
color: white;
padding: 5px 10px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
background: rgb(255,0,0);
background: linear-gradient(180deg, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(200,0,0,1) 50.1%, rgba(200,0,0,1) 100%);
cursor:pointer;
}
/* Hover state */
.button:hover {
background: linear-gradient(180deg, rgba(255,50,50,1) 0%, rgba(255,50,50,1) 50%, rgba(200,50,50,1) 50.1%, rgba(200,50,50,1) 100%);
box-shadow: 0px 0px 1px rgba(0,0,0,0.4);
}
<div class="button">SUBMITâ–¶</div>
To do this, just use background: linear-gradient()
.button {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 50px;
color: white;
background: linear-gradient(to top, green 50%, red 50%);
}
<div class="button">
submit
</div>
This question already has answers here:
How to increase space between dotted border dots
(20 answers)
Closed 4 years ago.
How can I achive this kind of border? This 20px dash and 20px spacing between dashes. Is it even possible without custom background file? The closest i can get is something like this:
.element {
width: 600px;
height: 300px;
border-radius: 45px;
background-image: linear-gradient(to right, red 50%, white 50%);
background-position: top;
background-size: 10px 1px;
background-repeat: repeat-x;
}
<div class="element">
TEXT TEXT
</div>
live: https://jsfiddle.net/roo5rbb3/
Try this:
border-style: dashed;
So your complete css will look like this:
.element {
width: 600px;
height: 300px;
border-radius: 45px;
background-image: linear-gradient(to right, red 50%, white 50%);
background-position: top;
background-size: 10px 1px;
background-repeat: repeat-x;
border-color: red;
border-width: 2px;
border-style: dashed;
}
Hi all,
I would like to insert a <button> in my code that has a gap in border-top and border-bottom. I have seen some examples where it is possible to remove a part with it, but it's not exactly what I am looking for. Do you have an idea on how to get something like the above mentioned picture?
Thanks in advance for your replies!
EDIT:
I add more information: the best is that the background of the button is transparent and that the border-size is customisable.
Use pseudo elements
.brd {
font-size: 30px;
padding: 4px 20px;
position: relative;
border: none;
background-color: white;
}
.brd:before,
.brd:after {
content: ' ';
position: absolute;
border: 1px solid black;
top: 0;
bottom: 0;
width: 10px;
}
.brd:before {
border-right: 0;
left: 0;
}
.brd:after {
border-left: 0;
right: 0;
}
<span class="brd">Title</span>
<button class="brd">Title</button>
Another possible solution is to use gradient as border-image. Look at the snippet below
.box{
display:inline-block;
margin: auto;
padding: 10px;
border: 3px solid transparent;
-moz-border-image: -moz-linear-gradient(to right, #aaa 10%, #fff 10%, #fff 90%, #aaa 90%);
-webkit-border-image: -webkit-linear-gradient(to right, #aaa 10%, #fff 10%, #fff 90%, #aaa 90%);
border-image: linear-gradient(to right, #aaa 10%, #fff 10%, #fff 90%, #aaa 90%);
border-image-slice: 1;
}
<div class="box" >TITLE HERE</div>
If you want the top and bottom border parts to be exactly X pixels, you can change the percents with pixels like this:
border-image: linear-gradient(to right, #aaa 20px, #fff 20px, #fff calc(100% - 20px), #aaa calc(100% - 20px));
A simple way would be using a custom made image as the background of your button, tho it wouldn't scale well on different screen sizes.
Another idea would be to have a div underneath with a normal border, and then your smaller button on top of it, with the same height and a white border, so as to hide the top and bottom part.
I've created a JSFiddle for you: enter link description here
HTML:
<div class="back-with-border">
<div class="front-no-border">
Title Here
</div>
</div>
CSS:
.back-with-border{
border:1px solid gray;
width:200px;
height:100px;
position: relative;
}
.front-no-border{
display:flex;
justify-content:center;
align-items:center;
border:0px;
background-color:white;
position: absolute;
width:110px;
height:110px;
top:-1px;
left:45px
}
Check this [JSFiddle][1], hope this will solve your problem
body {
background-color: white;
}
.parent {
border: 1px solid black;
width: 200px;
height: 100px;
position: relative;
background-color: white;
}
.child {
display: flex;
justify-content: center;
align-items: center;
border: 0px;
background-color: white;
position: absolute;
width: 150px;
height: 103px;
top: -1px;
left: 25px
}
<div class="parent">
<div class="child">
Write your text here
</div>
</div>
[1]: https://jsfiddle.net/anshul24mehta/eocst0uv/3/
I am trying to get a certain effect on a header for a mockup. It has white glow almost not noticeable. You will see it in this picture i provide behind the title and sub title. How can i get that glow effect with css? I do have a header with the entire thing but is that a good idea to use an image for an entire header? Also i want those two lines near the subtitle. Is it possible to code those lines? And last, the button "order now", will that be possible to make with css or should i just use an image of that and link it?
mockup
jsfiddle - http://jsfiddle.net/ezdr3xdg/1/ [what i currently have]
<header>
<h1>Taffies Cupcakes</h1>
<h2>Fresh and tasty</h2>
</header>
body{
background-color:#e7d2c9;
}
header h1{
font-family:georgia;
font-size:46px;
color:#784f3d;
text-align:center;
margin-top:50px;
}
header h2{
font-family:segoe script;
font-size:32px;
color:#846a5f;
text-align:center;
}
All of this is possible to do in CSS 3, I wouldn't recommend it though. Using an image for the button and the header is the best idea if you want it to look the same in all browsers. If you want to do it in CSS anyway try this:
HTML:
<header>
<div class="shadow"></div>
<h1>Taffies Cupcakes</h1>
<h2><div class="line"></div>Fresh and tasty<div class="line"></div></h2>
</header>
CSS:
header > .shadow {
width: 0px;
height: 0px;
margin: 0px 50%;
box-shadow: 0px 0px 200px 100px white;
}
header h2 > .line {
height: 1px;
width: 100px;
margin: 5px 20px;
background-color: #846a5f;
display: inline-block;
vertical-align: middle;
}
As the other answers have mentioned, radial-gradient is probably the way to go here. Just apply it to the header element instead of using my version with box-shadow (which might be a little hacky to some).
Update for the button:
HTML:
<button class="special"><div class="icon"></div><div class="headline">ORDER NOW</div><div class="description">We deliver in 24 hours</div></button>
CSS:
button.special {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #784f3d), color-stop(1, #846a5f) );
background:-moz-linear-gradient( center top, #784f3d 5%, #846a5f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#784f3d', endColorstr='#846a5f');
background-color:#784f3d;
color: #e7d2c9;
text-align: left;
border: 0;
outline: 0;
border-radius: 5px;
height: 42px;
}
button.special > .icon {
width: 27px;
height: 27px;
/*background-image: url('triangle-button.png')*/
position: absolute;
margin: 5px;
}
button.special > .headline {
margin-left: 42px;
font-size: 18px;
}
button.special > .description {
margin-left: 42px;
font-size: 12px;
}
http://jsfiddle.net/ezdr3xdg/17/
Use CSS radial-gradient()
DEMO 1:
body {
height: 100vh;
background-color: #e7d2c9;
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 50%);
}
DEMO 2:
body{
height:100vh;
background-color:#e7d2c9;
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 100%);
}
DEMO 3:
body {
height: 100vh;
background-color: #e7d2c9;
position:relative;
}
body:after {
content: '';
position: absolute;
left: 50%;
top: -150px;
margin-left: -100px;
width: 200px;
height: 200px;
border-radius: 50%;
z-index:-1;
background: rgba(255, 255, 255, 0.42);
box-shadow: 0 0 40px 64px rgba(255, 255, 255, 0.42);
}
I have update your jsfiddle with a starting template of sorts. Its CSS# gradients and border-radius. http://jsfiddle.net/ezdr3xdg/7/
the button:
<div id="order_now">
<div id="triangle-right"></div>
<div id="text">
ORDER NOW
<div id="sub_order">we deliver in 24hours</div>
</div>
</div>
CSS:
The Button:
#order_now{
background: linear-gradient(#846a5f, brown);
width: 200px;
border-radius: 5px;
padding: 5px;
color: white;
font-size: 12pt;
font-weight: bold;
}
#sub_order{
font-size: 10pt;
font-style: italic;
}
#triangle-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid white;
border-bottom: 25px solid transparent;
display: inline-block;
}
#text{
display: inline-block;
}
The Background:
body{
background:linear-gradient(to right, red, blue, red);
}
this should be enough to get you started.
I have a box container as shown bellow
Which i want to code in a modular way so that i can use the html css structure to build any size box in width and height. I will be using Bootstrap to code the website
Which is the best way to get started.
Let's say that gradient on the top is named gradient.png
.box {
border: 1px solid gray;
border-radius: 3px;
background: white url("gradient.png") ;
background-repeat: repeat-y;
padding-top: 20px;
}
I think it's mostly self explanatory; the repeat-y just makes it repeat accross the top but not throughout the rest of the image. The padding makes it so the text doesn't start at the top. See how it works for you.
By the way, is that from the Apple discusion page?
I tried to keep this as similar to your example as I could with straight CSS. Given this approach, you won't find immediate support in IE8 and lower.
The markup for the box itself is pretty simple:
<div id="modal">
<header><h1>Something Here</h1></header>
<section>
<p>Pellentesque habitant morbi tristique...</p>
</section>
</div>
The CSS for this markup can be found below the preview image below.
Demo: http://jsbin.com/ogesuf/5/edit
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#modal {
width: 600px;
border: 1px solid #CCC;
box-shadow: 0 1px 5px #CCC;
border-radius: 5px;
font-family: verdana;
margin: 25px auto;
overflow: hidden;
}
#modal header {
background: #f1f1f1;
background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
box-shadow: 0 1px 2px #888;
padding: 10px;
}
#modal h1 {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 2px white;
color: #888;
text-align: center;
}
#modal section {
padding: 10px 30px;
font-size: 12px;
line-height: 175%;
color: #333;
}
</style>
If you're willing to try jQuery ui you can simply use dialog to achieve what you want here is the link with more info.
http://jqueryui.com/demos/dialog/#default