This question already has an answer here:
A more suitable way to change submit button behaviour [duplicate]
(1 answer)
Closed 2 years ago.
I asked a question here for a more suitable way to change submit button behaviour and while the answer has been accepted because it's suitable it isn't the desired effect.
Yes it gets rid of the white border between the border and the inner of the submit button but this button will be used in other places too so the gradient needs to be smooth.
At the moment if you look closely you'll notice that the border isn't seamless. I need a way to make the gradient appear as though it's the entire button and it not be clear that there's a border.
In the image above you can see that the gradient isn't seamless with the border too, is there a way to achieve this? For the entire form you can see here.
.size {
width: 30%;
margin-left: auto;
margin-right: auto;
}
.site-input-container {
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
border: solid 5px transparent;
border-radius: 30px;
margin-bottom: 10px;
overflow: hidden;
box-sizing: border-box;
}
.site-submit-container:hover {
background-image: linear-gradient(-45deg, #006699, #9900CC), radial-gradient(circle at top right, #006699, #9900CC);
}
.site-submit-container:hover input {
background: transparent;
color: #fff;
}
input[type=submit] {
width: 100%;
padding: 15px;
display: inline-block;
border: none;
outline: none;
border-radius: 30px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background: #FFFFFF;
}
<div class="size">
<form>
<div class="site-input-container site-submit-container">
<input type="submit" name="submit" id="submit" value="Contact Us" required="">
</div>
</form>
</div>
It isn't the most noticeable thing ever but it isn't ideal. Because I've had to use DIVs to contain it there needs to be a way to make it look seamless as a normal button would be done differently. I have to keep this as it's how the page is set up and it's easier to match the rest of the form.
It's even clearer why it needs to be seamless when the button is smaller
Using two linear gradients fixes this.
.site-submit-container:hover {
background-image: linear-gradient(-45deg, #006699, #9900CC), linear-gradient(-45deg, #006699, #9900CC);
}
Related
I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (.png image) to that panel, which indicates that the selected panel has been already selected before.
So if the user sees for example 10 panels and 4 of them have this small sign, he knows that he has already clicked on those panels before. This work fine so far. The problem is now that I can't display the small sign and make the panel blue at the same time.
I set the panel to blue with the css background: #6DB3F2; and the background image with background-image: url('images/checked.png'). But it seems that the background color is above the image so you cannot see the sign.
Is it therefore possible to set z-indexes for the background color and the background image?
You need to use the full property name for each:
background-color: #6DB3F2;
background-image: url('images/checked.png');
Or, you can use the background shorthand and specify it all in one line:
background: url('images/checked.png'), #6DB3F2;
For me this solution didn't work out:
background-color: #6DB3F2;
background-image: url('images/checked.png');
But instead it worked the other way:
<div class="block">
<span>
...
</span>
</div>
the css:
.block{
background-image: url('img.jpg') no-repeat;
position: relative;
}
.block::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
Based on MDN Web Docs you can set multiple background using shorthand background property or individual properties except for background-color. In your case, you can do a trick using linear-gradient like this:
background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);
The first item (image) in the parameter will be put on top. The second item (color background) will be put underneath the first. You can also set other properties individually. For example, to set the image size and position.
background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;
Benefit of this method is you can implement it for other cases easily, for example, you want to make the blue color overlaying the image with certain opacity.
background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;
Individual property parameters are set respectively. Because the image is put underneath the color overlay, its property parameters are also placed after color overlay parameters.
And if you want Generate a Black Shadow in the background, you can use
the following:
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
You can also use short trick to use image and color both like this :-
body {
background:#000 url('images/checked.png');
}
really interesting problem, haven't seen it yet. this code works fine for me. tested it in chrome and IE9
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
The next syntax can be used as well.
background: <background-color>
url('../assets/icons/my-icon.svg')
<background-position-x background-position-y>
<background-repeat>;
It allows you combining background-color, background-image, background-position and background-repeat properties.
Example
background: #696969 url('../assets/icons/my-icon.svg') center center no-repeat;
This actually works for me:
background-color: #6DB3F2;
background-image: url('images/checked.png');
You can also drop a solid shadow and set the background image:
background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;
If the first option is not working for some reason and you don't want to use the box shadow you can always use a pseudo element for the image without any extra HTML:
.btn{
position: relative;
background-color: #6DB3F2;
}
.btn:before{
content: "";
display: block;
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
background-image: url('images/checked.png');
}
Here is how I styled my colored buttons with an icon in the background
I used "background-color" property for the color and "background" property for the image.
<style>
.btn {
display: inline-block;
line-height: 1em;
padding: .1em .3em .15em 2em
border-radius: .2em;
border: 1px solid #d8d8d8;
background-color: #cccccc;
}
.thumb-up {
background: url('/icons/thumb-up.png') no-repeat 3px center;
}
.thumb-down {
background: url('/icons/thumb-down.png') no-repeat 3px center;
}
</style>
<span class="btn thumb-up">Thumb up</span>
<span class="btn thumb-down">Thumb down</span>
Assuming you want an icon on the right (or left) then this should work best:
.show-hide-button::after {
content:"";
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
background-size: 1em;
width: 1em;
height: 1em;
background-position: 0 2px;
margin-left: .5em;
}
.show-hide-button.shown::after {
background-image: url(img/eye.svg);
}
You could also do background-size: contain;, but that should be mostly the same. the background-position will depened on your image.
Then you can easily do an alternative state on hover:
.show-hide-button.shown:hover::after {
background-image: url(img/eye-no.svg);
}
You can try with box shadow: inset
.second_info_block {
background: url('imageURL');
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}
<li style="background-color: #ffffff;"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></li>
Other Sample Box Center Image and Background Color
1.First clearpixel fix image area
2.style center image area box
3.li background or div color style
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
Hi I am trying to create a highlight on a CSS shape as shown below.
There will also be content inside of the hexagon including image and text,
The highlight I am referring to is the part in the top left.
the code I currently have for creating the hexagon is:
HTML
<div class="hexagon-big"></div>
CSS
.hexagon-big {
position: relative;
width: 200px;
height: 115.47px;
background-color: #343434;
}
.hexagon-big:before,
.hexagon-big:after {
content: "";
position: absolute;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.hexagon-big:before {
bottom: 100%;
border-bottom: 57.74px solid #343434;
}
.hexagon-big:after {
top: 100%;
width: 0;
border-top: 57.74px solid #343434;
}
There is other code for the content but i left it out because I don't think it is necessary
Do the hexagon shape differently and you can rely on gradient to create that highlight effect:
.hex {
width: 200px;
display: inline-flex;
margin:0 5px;
background:
conic-gradient(at top,#000 230deg, #0000 0),
linear-gradient(to bottom left,#fff , #000 60%);
clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}
.hex::before {
content: "";
padding-top: 115%; /* 100%/cos(30) */
}
<div class="hex"></div>
The solution in this answer is heavily based on the previous answer. To use clip-path and stacked gradients is by far the smartest thing to do here, but I still wanted to post this in order to show, how this solution could be improved and adjusted for your use case (text box, coloring, variables for maintenance, etc.).
.hexagon-big {
/* define box and text space */
width: 200px;
height: 230px;
padding: 10.8% 5px; /* adjust text box padding here; mind that top/bottom tip are part of the box */
box-sizing: border-box; /* width/height should include padding */
/* text formatting (optional) */
color: white;
text-align: center;
/* hex shape */
--hex-col: hsl(0deg 0% 20%); /* just your #343434 as a HSL color */
--hex-shadow: hsl(0deg 0% 50%); /* increased lightness by 15% to define highlight root color; 100% would be fully white */
background:
conic-gradient(at top, var(--hex-col) 232deg, transparent 0), /* change the angle of the shadow at "232deg": increase → narrower, decrease → wider */
linear-gradient(to bottom left, var(--hex-shadow), var(--hex-col) 55%);
clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}
<div class="hexagon-big">
Lorem ipsum dolor sit amet...
</div>
It should also be mentioned that your current way of using border is well better supported by older browsers than clip-path and conic-gradient (same with var()).
If this should be a problem, you might have to add another HTML tag and work out a way with transform: matrix(...) and box-shadow: inset ... (for example).
I am using an input in one of my projects and I'm making a dotted line on the bottom. Ideally, I would like to have about 5 dots about 10px wide each. Kind of like the example below: ________ ________ _______ ______ _____.
This is the code that I have so far :
input {
border-bottom: 3px tomato dotted;
}
<input type="text" numbers-only>
Use gradient
input {
border-bottom: 3px solid tomato;
border-bottom:none;
background:repeating-linear-gradient(to right,tomato 0 10px,transparent 0 15px) bottom/100% 3px no-repeat;
}
<input type="text" numbers-only/>
Try using a background with linear-gradient to get 5 lines like this:
input {
border-bottom: none;
background-image: linear-gradient(to right, black 90%, white 0%);
background-position: bottom;
background-size: 40px 1px;
background-repeat: repeat-x;
}
<input type="text" numbers-only />
I don't think there's a way to change the default styling of the dotted border type.
This answer uses the background-image property with a gradient to simulate a border.
You can use this trick on an element behind your input like the following example.
#my-input {
/* Keep form compatability by
using an inline display type */
display: inline-block;
/* Make some space at the bottom
for the gradient to show under
the input */
padding-bottom: 2px;
background-image: linear-gradient(to right, tomato 50%, transparent 0%);
background-position: bottom;
background-size: 20px 2px;
background-repeat: repeat-x;
}
#my-input input {
border-bottom: 0;
}
<div id="my-input">
<input type="text">
</div>
I want to change the color only of 1/3 of the bottom border and i want it to be changed only when someone clicks on the text (summer, spring or winter). Is it possible to do something like this with only CSS (with pseudo-elements like before or after) or do i have to use JS in this case?
HTML:
<div class="seasons">
<span id="text1">Summer</span>
<span id="text2">Spring</span>
<span id="text3">Winter</span>
</div>
CSS:
.seasons {
color: #B5BAB8;
display: inline-block;
margin: 10px;
border-bottom: 2px solid #B5BAB8;
padding-bottom: 15px;
margin-top: 465px;
}
.seasons span {
width: 250px;
display: inline-block;
}
Something like this could work using JS
CSS
.seasons {
color: #B5BAB8;
display: inline-block;
margin: 10px;
margin-top: 465px;
}
.seasons span {
width: 250px;
float: left;
padding-bottom: 15px;
border-bottom: 2px solid #B5BAB8;
}
.seasons span.highlighted {
border-bottom-color: red;
}
JS
$('.seasons span').on('click', function() {
$('.seasons span').removeClass('highlighted');
$(this).addClass('highlighted');
})
Edit: upps. I guess you want to change just 33% percentage of the full border. I thought you want to change 33% percentage of the each span elements border. Which has almost the same width the texts.
I tried your code on Codepen but, before suggestions, let me answer your question first:
Answer:
Yes you can -kinda- achive this without JS.
You have to use these following:
1. Linear gradient borders:
You can use
linear-gradient(to right, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 100%);
for your borders. That percentages may change as you like.
2. :active, :focus or :hover pseudo states for these spans:
You can change that gradient for click (:active) state.
linear-gradient(to right, rgba(255,0,0,0) 30%, rgba(255,0,0,1) 70%);
3. Adding effects:
You can also use
transition: all .3s ease-in-out;
for your effect.
But my suggestion:
Using :after element with position: absolute for :active state.
You can create an :after element for these spans' :active states like this:
span:active:after{
content:"";
display: block;
position: absolute;
bottom: 1px;
width: 100px;
height: 5px;
display: block;
}
You can add background to this pseudo element or you can also add normal border for this element.
If positioning not works, try position: relative for parents. This also requires display: block for spans.
Here a possibility without JS.
input[type="radio"] {
display: none;
}
label {
cursor: pointer;
border-bottom: 3px solid #0ff;
}
label:not(:last-child) {
margin-right: 1em;
}
input[type="radio"]:checked+label {
border-bottom: 3px solid transparent;
border-image: linear-gradient(to right, #f0f 0%, #f0f 33%, #3acfd5 33%, #fff, #3acfd5 34%, #0ff, 34%, #0ff 100%);
border-image-slice: 1;
}
<div class="seasons">
<form>
<input id="summer" name="season" type="radio" value="summer">
<label for="summer">Summer</label>
<input id="spring" name="season" type="radio" value="spring">
<label for="spring">Spring</label>
<input id="winter" name="season" type="radio" value="winter">
<label for="winter">Winter</label>
</form>
</div>
I have following CSS class :
.acceptRejectAll a, .acceptRejectAll a:visited{
background-image: url("../images/view-patient.png");
background-position: left top;
background-repeat: no-repeat;
color: #4B555C;
float: left;
height: 35px;
padding-top: 12px;
text-align: center;
text-decoration: none;
width: 100px;
}
and following HTML :
<div style="float: none; display: inline-table" class="acceptRejectAll">
<a style="display:inline-block;height:25px;" href="#" class="fontBlack" id="ctl00_ContentPlaceHolder1_btnAcceptAll">Accept All</a>
</div>
this is display as follows :
when i decrease the size of in css class like : width : 85px
it displays as follows :
it cuts image from right side:
i tried to set background-Position in css class : but either left side or right side, image is not display correctly
wht is solution ?
Thanks
You will need to use background-size for this. Example:
background-size: 100% 100%;
Please note that this setting can scale your image to fill parent.
As the image is 100px (at least the visible part is about 92px so I guess the size is 100px) if you change the size of the button you need to scale the background image rather than change the position.
background-size:85px 35px;
Gradient and Border radius
Another way to approach this — considering the kind of button style you are using — is to go the gradient and border radius route. Whilst the code to use a css gradient looks rather messy, it is dynamically generated so you wont end up with stretched curved corners like you will using background-size.
Everything used below is pretty well supported now by most browsers. For anything that doesn't support the gradient you will get a solid blue background with curved corners instead, and it almost isn't worth worrying about non-support for border radius any more.
markup:
<div class="acceptRejectAll">
Accept All
</div>
css:
.acceptRejectAll {
display: inline-table;
border-radius: 20px;
text-align: center;
padding: 10px;
width: 100px; /* You can change the width as you like */
background: #c3e5fe; /* Old browsers */
background: -moz-linear-gradient(top, #c3e5fe 0%, #98d1fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3e5fe), color-stop(100%,#98d1fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* IE10+ */
background: linear-gradient(to bottom, #c3e5fe 0%,#98d1fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3e5fe', endColorstr='#98d1fd',GradientType=0 );
}
.fontBlack {
font-family: sans-serif;
font-size: 10pt;
color: black;
text-decoration: none;
}
The gradient was generated using:
http://www.colorzilla.com/gradient-editor/#c3e5fe+0,98d1fd+100;Custom
You end up with:
http://jsfiddle.net/NDHtn/
Or as a preview:
When you must use an image
If there is no other choice but to use an image as a background for a button — say, the graphics are too complicated to replicate using css effects — rather than use one image stretched and distorted to fit, you can use something like the following. There are many ways to essentially achieve the same result, I prefer to keep my mark-up simple and my css more complicated (rather than the other way around). However, to make things more supportive of the wider browser community you can break your mark-up into three parts, rather than make use of ::before and ::after:
markup:
<a class="button" href="#">
<span>Round Button with lots of text and then some</span>
</a>
css:
.button:before {
position: absolute;
content: '';
background: url('image.png') left top;
top: 0;
left: -50px;
width: 50px;
height: 99px;
}
.button:after {
position: absolute;
content: '';
background: url('image.png') right top;
top: 0;
right: -50px;
width: 50px;
height: 99px;
}
.button {
background: url('image.png') center -99px;
height: 99px;
margin: 0 50px;
position: relative;
display: inline-block;
color: white;
text-decoration: none;
}
.button span { display: block; padding: 35px 0px; }
image.png, hacked together using this original image and pixlr.com:
Which will give:
http://jsfiddle.net/2K5Kg/1/
Example mark-up without use of psuedo elements:
<a class="button" href="#">
<span class="before"></span>
<span class="after"></span>
<span>Round Button with lots of text and then some</span>
</a>
Then in the css just replace the .button:before with .button .before and the same for :after.