Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have been working on a project that contains some button in the same way the Google plus buttons work, I want to style them in the same way, one gradient to all of them,
please help me.
Check the buttons.
https://plus.google.com/discover/
https://i.stack.imgur.com/q8MXJ.jpg
I'm not sure how google do it, but I would use a fixed gradient background.
background: linear-gradient(-90deg, red, yellow); add a standard gradient background to the buttons going from a red to yellow, you can use any colors you like.
background-attachment: fixed; fix the background in place so it's in the same place for all divs.
This will work for buttons that are all different lengths, but for the example I use a fixed length.
.button {
float: left;
background: linear-gradient(-90deg, red, yellow);
background-attachment: fixed;
width: 150px;
height: 50px;
margin-right: 20px;
border-radius: 25px;
}
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
To reach this effect you have to use css gradients.
You do not have some code we could show you on so read more about here: https://www.w3schools.com/css/css3_gradients.asp
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 11 months ago.
Improve this question
I am wondering how are you able to create a circle button using HTML and CSS. I feel like it has something to do with border-radius after you set a proper width and height but it didnt work out like I hoped. The image below shows what it should look like.
What the button should look like
For a circle shaped button all you need to do is set your border-radius to 50%. Change the background-color of the button to white and you should be good to go. You can also set your .button height, width, font-size and font-family to mimic your desired look.
<style>
.cont {
width:100%;
height:100%;
background-color:lightgrey
;
}
.button{
width:100px;
height:100px;
border-radius: 50%;
border:none;
background-color:lightgrey;
}
</style>
<div class="cont">
<button class="button">Explore</button>
</div>
if you want a generalized solution then you can try this
HTML
<button>Explore</button>
CSS
button {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: white;
}
You can adjust the width & height according to your requirement
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
How to create semi-translucent text like in beginning of that website https://superscene.pro/
I really wonder how to make text stay with define color and become translucent when there is object behind it ? Maybe someone can give tips on how to make dragging of object like on that website
You can do this using:
mix-blend-mode: exclusion;
You know, there is something called "inspector" where you can see styles and edit tags about the document. The inspector looks like this:
From looking at their source in the CSS, it appears to be coming from the following rule:
mix-blend-mode: exclusion;
Adding this rule should do what you desire. If you want more information, I recommend looking here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
You can use css mix-blend-mode on text container or in text itself and you can give color to text to give more details, more info here
.bg{
background-image:url('https://i.picsum.photos/id/866/400/400.jpg?hmac=oHJBlOQwtaF75oX43dFtPf4At_GRLEx9FQqkkfpLR5U');
background-size: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.blend{
mix-blend-mode: exclusion;
color: white;
display: block;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-size: 6rem;
}
<div class="bg">
<div class="blend">
<p>This ts text</p>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I want to add css color transitioning (non-moving) to backgrounds and text (This sentence is a test sentence.) I know this is possible with CSS/javascript, but I want to do it strictly with CSS/HTML only.
Example image
In the image above how the yellow transitions to purple with shades in between is what I want to achieve. Is this doable in CSS?
Here's an implementation that can be achieved by using the linear-gradient functionality on the background modifier.
Some key values include:
the gradient angle: 90deg (horizontally) in this example.
the colour transition points: 0% and 100% (end-to-end) in this example.
#Box{
height: 200px;
width: 200px;
background: rgb(250,253,55);
background: linear-gradient(90deg, rgba(250,253,55,1) 0%, rgba(128,17,125,1) 100%);
}
<div id = "Box"></div>
You can use the background-image attribute and set its value as a linear-gradient.
In your case the style should be background-image: linear-gradient(to right, yellow, purple)
Ref. https://www.w3schools.com/css/css3_gradients.asp
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Button
How can I make this shaped button? I can use right side with "border-radius", but I have no clue how to implement left side.
You can use the CSS pseudo-selector ::before to accomplish this.
Select the element like so, and add the following styles:
.button::before {
content: "";
width: //whatever you choose to fit
height: //whatever you choose to fit
background-color: #fff !important;
//this will hide the border of the element itself
border-radius: //same radius as the element
z-index: 9999; //hides the button border
border-right: //same width as the element, solid black
border-left: 0px; //so it doesnt show
border-bottom: 0px;
border-top: 0px;
}
Lastly is the positioning, I'm trusting that you will figure out how to position it correctly. Let me know if this works. It's basically a circle with only the right border showing, sitting over the button element.
A pure CSS solution consists of adding a circular "gradient" background image on top of the normal background image: HTML
.round {
background:
radial-gradient(circle at 0 50%, rgba(204,0,0,0) 30px, #c00 15px);
border-top-right-radius:3em;
border-bottom-right-radius:3em;
}
<div class="round">By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).</div>
Fiddle
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a logo that I need to insert into an html page, that logo is in a square size but I need it to become a circle, how can I do that using CSS?
.logo {
background: url('path/to/image.jpg');
height: 100px;
width: 100px;
border-radius: 100px;
}
This should do the job. Set the background url to the one of the logo and height and width accordingly.
Use border-radius. A simple example you can see here:
img.logo {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
<img class="logo" src="http://placehold.it/100x100"/>
Use border-radius then set overflow to hidden.
use border and make
border-radius:50%;