Recently I am creating a website. I want to make a transparent border around the main title CSS.
**Code:
h1
{
background-color: rgb(66, 113, 214);
color:#581845;
}```
Can Anyone help me?
Thank you
If you want a transparent border you must change the background-clip property as, otherwise, the background color will show through.
Here I have added an outline so you can see the "gap" where the border is.
h1 {
background-color: rgb(66, 113, 214);
color: #581845;
display: inline-block;
margin: .5em 1em;
border: 12px solid transparent;
outline: 1px solid red;
}
.clip {
background-clip: content-box;
}
body {
background: lightblue;
}
<h1 class="clip">With Clipping</h1>
<h1>Without Clipping</h1>
Related
How can I create the above effect in css border?
You can use box shadow for additional border effect. For more detailed examples please check Double border with different color
<hr>
<style>
body {
background: #1f1f1f;
}
hr {
border: none;
height: 2px;
background: #000;
box-shadow: 0 1px 0 0 #404040;
}
</style>
I'm trying to change the look of the QPushButton of my application to be similar to the PyCharm ones.
I almost made it but I would like to change the "external" border of the button on focus.
To better explain myself, two screenshots are posted below: the first shows a PyCharm dialog with the focus on the OK button and the second shows part of a dialog of my application with the focus on the OK button as well.
The buttons are similar but in the first picture the border "grows" outwards while in the second the border "grows" inwards.
Is there a way to change this "property" through the stylesheet?
My stylesheet below:
QPushButton{
font-family: "Segoe UI";
font-size: 8pt;
border: 1px solid;
border-color: rgb(46, 103, 156);
border-radius: 3px;
padding-right: 10px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: rgb(77, 138, 201);
color: white;
font: bold;
width: 64px;
}
QPushButton:hover {
border: 1px solid;
border-radius: 3px;
border-color: rgb(33, 77, 115);
}
QPushButton:focus {
outline-color: transparent;
border: 2px solid;
border-color: rgb(151, 195, 243);
}
QPushButton:pressed{
background-color: rgb(52, 113, 173);
}
QPushButton:disabled {
color: grey;
border-color: grey;
background-color: none;
}
You could set a default margin (which sets the margins between the effective widget rectangle and its drawn contents), and set it to 0 for the focus selector:
QPushButton {
...
margin: 1px;
}
QPushButton:focus {
...
margin: 0px;
}
I have this div in styled components
const StyledDots = styled.div`
width: 16px;
height: 16px;
border: solid 1px #d2d2d2;
border-radius: 20px;
background-color: #ffffff;
position: relative;
top: 50px;
right: 15px;
::focus {
background: black;
} `
I tried to change background color to gray with focus but as you see I'm doing something wrong and i Dont know what,Any suggestions please?
(Would be better if only 50% of the div will change the color)
to change style onHover, onFocus, ...etc with styled components you need to use this syntax:
&:focus {
background: black;
}
for background to be 50% of the height you can use linear-gradient to set the background color:
&:focus {
background: linear-gradient(180deg, black 50%, white 50%);
}
I'm trying to create a button that has two colors as a border.
The two colors i need used are blue: #00a7e1, orange: #f6531d.
I would like to just use css if possible.
Thank in advance!
link to button concept
Example:
.btn
{
border: 0;
padding: 4px;
display: inline-block;
background: linear-gradient(20deg, #00a7e1 49%, #e65300 50%);
}
.bg
{
background: #349645;
padding: 8px 14px;
font: bold 24px Consolas;
}
.btn:active .bg
{
background: #0a1117;
color: #ffffff;
}
<div class="btn"><div class="bg">YOU'R TITLE</div></div>
<button class="btn"><div class="bg">YOU'R TITLE</div></div>
You may also play with gradient and background-clip (see comments in CSS)
button {
vertical-align: top;
border: 5px solid transparent;/* give extra space for gradients colors */
font-size: 2.5rem;
margin: 0.25em;
padding: 0.5em 2em;
background: linear-gradient(#333, #333),/* black turned into gradient to hold with background-clip and hide the 2 color gradient under it */
linear-gradient(/* 2 colors to draw under the borders also via background-clip*/
to bottom left,
rgb(230, 83, 0) 50%,
gray 51%,
rgb(0, 166, 224) 40%
)
no-repeat center center;
background-clip:
padding-box, /* drawn inside including padding area */
border-box;/* drawn also under borders */
background-size:
100% 100%,
110% 150%;/* must be bigger than 100% so it include also borders, else it repeats */
color: white;
box-shadow: 0 0 2px 2px black, inset 0 0 2px black;/* did you want this too ? */
}
<button>BUTTON</button> <button> TO</button> <button> PLAY</button>
If you think this is too much, you also have border-image .
Simply use border-image with a gradient:
button {
padding:20px;
border:5px solid;
border-image:linear-gradient(60deg,#00a7e1 50%,#f6531d 0) 20;
background:transparent;
}
<button>some text</button>
I have this CSS code for a textbox class and I'm on working on linux.
It's saved in a .css file and i'm using gedit. But the box-shadow property isn't recognized. All the others have that different font which shows a keyword or so. But not box-shadow. Any ideas please? It seems to work on windows when i use notepad++.
.textbox
{
background: white;
border: 1px solid #ffa853;
border-radius: 5px;
box-shadow: 0 0 5px 3px #00FFFF;
color: #666;
outline: none;
height:23px;
width: 275px;
}
You may be confusing box-shadow with text-shadow.
text-shadow applies to text, box applies to containers
I have made a small fiddle to demonstrate both
div {
width: 200px;
height: 300px;
background-color: #fff;
box-shadow: 10px 10px 5px grey;
}
p {
text-shadow: 1px 1px 2px black;
color: red;
font-size: 5em;
}
<div>
<p>
hello
</p>
</div>
if you are trying to adjust the appearance of an input (or a number of inputs)
a useful way of doing it is:
input[type="text"] {
/*your styles here*/
}