I am not able to make a shadow gradient background for one image described in the following snippet. I have tried various solutions but couldn't make it to work. The image gets cut off from bottom.
.circle {
line-height: 0.33;
border-radius: 100%;
background: #fff;
color: #FFF;
box-shadow: 1px 5px 20px #adadad;
}
<img class="circle" src="https://i.stack.imgur.com/4kEf0.png">
Please check out the below solution. I hope this helps.
.circle {
display: inline-block;
line-height: 0.33;
border-radius: 100%;
background: #fff;
color: #FFF;
box-shadow: 1px 5px 20px #adadad;
}
<div class="circle">
<img src="https://i.stack.imgur.com/4kEf0.png">
</div>
Please let me know if this helps.
Here's my take on your problem, i'm not sure what you wanted it to look like but this solution doesn't make the "x2" appear outside.
You need to wrap your image in a div bigger than the image if you want a circle border to contain the whole image. Adding border-radius basically makes a square border smaller, therefore covering your image.
.circle-border {
text-align: center;
width: 450px;
height: 430px;
line-height: 0.33;
border-radius: 100%;
background: #fff;
color: #FFF;
box-shadow: 1px 5px 20px #adadad;
}
<div class="circle-border">
<img class="circle" src="https://i.stack.imgur.com/4kEf0.png">
</div>
.circle-border {
display: inline-block;
line-height: 0.33;
border-radius: 100%;
background: #fff;
color: #FFF;
box-shadow: 1px 5px 20px #adadad;
}
<div class="circle-border">
<img src="https://i.stack.imgur.com/4kEf0.png">
</div>
Related
Apparently the text is positioned to the right and I do not know why. Earlier the header was working but now it does not.
.news-box {
background: black;
width: 500px;
height: 450px;
top: 50%;
left: 20%;
transform: translate(20%, 50%);
border-radius: 20px;
box-shadow: 2px 5px 8px 10px rgb(0,0,0,0.5);
}
.news-box > h2 {
color: white;
text-align: center;
padding-top: 10px;
text-transform: uppercase;
-webkit-text-stroke: 0.5px rgb(0,0,0,1);
text-shadow: 2px 2px 4px rgb(0,0,0,0.8);
}
Since i don't have the full code (including html), i can only suggest to put the text inside a <span>text</span> and use styling of float:left (for example).
Another option would be to put it inside a <span> or a <div> and set "text-align:left/right" (whatever works for you)
So I have this code:
<h1 id="result" style="color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">
text
</h1>
How can I make a border that if I put a longer text in, my border will keep its position and change its size, to make my text still in the border? Thanks!
Just adding border: 1px solid black (for example) to what you have works perfectly fine. The h1 element will grow and shrink to fit it's content and the border will do so as well:
const result = document.getElementById('result');
const sentence = "HELLO! IT LOOKS LIKE THIS IS WORKING FINE...";
let index = 0;
setInterval(() => {
index = (index % sentence.length) + 1;
result.innerHTML = sentence.slice(0, index);
}, 250);
#result {
position:absolute;
top: 10%;
left: 10%;
padding: 0 .5rem;
font-family: Sans-Serif;
font-size: 2rem;
line-height: 3rem;
color: black;
border: 3px solid black;
border-radius: 3px;
min-height: 3rem;
}
<h1 id="result"></h1>
Anyway, I suspect you may be referring to the border changing your element's dimension:
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
}
<div id="bar1"></div>
<div id="bar2"></div>
That's because by default, your element's width and height are actually a sum of the specified width and height properties, plus padding plus border, as you can see from the example above.
If that's the case, you have two options to keep the dimensions just as specified with width and height:
Using box-sizing: border-box. That will make padding and border included in the element's total width and height.
Using box-shadow instead of border. You can use the inset property to draw the shadow to the inside of the element instead of to the outside.
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
box-sizing: border-box;
}
#bar3 {
width: 50%;
height: 1rem;
background: yellow;
margin: .25rem;
box-shadow: inset 0 0 0 3px black;
}
#bar4 {
width: 50%;
height: 1rem;
background: lime;
margin: .25rem;
box-shadow: 0 0 0 3px black;
}
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
Note the 4th bar, the one with the outer box-shadow looks bigger, but if you inspect it, its dimensions are exactly the same as those in the other 3 bars.
Can you just add border: solid 1px black; to the style attribute, like this?
<h1 id="result" style="border: solid 1px black; color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">text</h1>
Fiddle: https://jsfiddle.net/myingling/LL57yd8j/
Here's some reading on CSS borders: https://www.w3schools.com/css/css_border.asp
I want to create the white border seen in the image below with CSS. White border that is set 25px inside the window. Iv'e tried to use box-shadow inset however was not able to create the space between the edge of the window.
I used this css:
border: 3px solid white; //took this out but still no luck
box-shadow: inset 0 0 0 5px #FFFFFF;
I also tried without the normal border as well.
I think I can create an overlay div that has a padding or margin and give it a border, but the problem is the content needs to be scrollable and clickable below it.
The goal:
The white box just above the icons.
Use a pseudo element
.parent {
position: relative;
height: 200px;
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.content {
height: 600px;
background: url(http://lorempixel.com/600/600/abstract/1) no-repeat center center / cover;
}
.parent:after {
content: '';
position: absolute;
left: 25px;
top: 25px;
right: 40px;
bottom: 25px;
border: 2px solid white;
}
<div class="parent">
<div class="wrapper">
<div class="content">
</div>
</div>
</div>
Use a transparent border to set the shadow where you want it.
The remaining problem is to extend the image to the borders. Use background-origin for this.
.test {
height: 250px;
width: 400px;
background-image: url(http://lorempixel.com/600/400);
background-origin: border-box;
background-size: cover;
border: 50px transparent solid;
box-shadow: inset 0px 0px 5px 5px cyan;
}
<div class="test">
</div>
hope this help.
body{
background: #000;
}
.wrapper{
width: 500px;
padding: 25px;
border: 3px solid #CCC;
}
.content{
border: 1px solid #fff;
padding: 15px;
color: #fff;
height: 400px;
}
<div class="wrapper">
<div class="content">
this is your content div with white border
</div>
</div>
I was trying to create a circle with i icon in it for with CSS. However, when page is first rendered the circle looks like an inverted egg and covers the border around it slightly. (Zoom in the browser to see issue in more details)
The tricky part is, if you open Dev Tools and change any value related to it's position(width, height, whatever), everything will snap back to normal and it will become a circle.
https://jsfiddle.net/2yjashje/
<div class="round-egg">
i
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 10px;
cursor: help;
border-bottom: none !important;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
}
What is going on here?
I put the letter "i" in its own span and increased the margin from top to vertically centre it. As for the circle, I modified the border-radius property, and then removed the border-bottom: none; property as well. Assuming you want a circle, you need the bottom border.
https://jsfiddle.net/2yjashje/3/
<div class="round-egg">
<span class="icon">i</span>
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 30px;
cursor: help;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
display: table-cell;
}
.icon {
display: block;
margin-top: 2px;
}
// I am asked to create a web site without the ability of using ids or classes. They would like to put two pictures at the top of the section. I used two examples in the section html code for example. They will be small and up tight againts the Title - specifically when I use the img vertical-align -20 and section h1 margin top -130 in css.
img {
width: 200px;
vertical-align: -20px;
}
section {
background-color: rgba(255, 255, 255, .9);
width: 1050px;
height: 1400px;
margin-top: -1190px;
margin-left: 110px;
margin-bottom: 140px;
border: 2px solid red;
border-radius: 10px;
box-shadow: 3px 3px 2px 2px black;
}
section h1 {
text-align: center;
font-size: 28px;
letter-spacing: 10px;
text-shadow: 1px 1px 1px red;
margin-top: -130px
}
<section>
<img src="canada.png" alt="Canada" />
<img src="canada.giff" alt="Canada" />
<h1>Title</h1>
</section>
It 's easy simply write align="right/left" in the html code like this:
<img align="left" src="canada.png" alt="canada" />
You can make atribute selectors on src like this:
img[src="canada.png"] {
/* Styles for canada.png */
}
img[src="canada.gif"] {
/* Styles for canada.gif */
}