I am trying to get the background color to appear in safari and it is not working. it works in chrome and firefox but no luck in safari. serious answers only please. here is my code i have in css.
main {
background-color: rgb(254, 236, 89, 0.85);
width: 960px;
padding-top: 130px;
padding-bottom: 87px;
}
In order to set an opacity on a background color you need to set the alpha of your color. So your color should be an rgba value, not rgb:
main {
background-color: rgba(254, 236, 89, 0.85);
}
Instead of
background-color: rgb(254, 236, 89, 0.85);
please try to use:
background-color: rgb(254, 236, 89);
opacity: 0.85;
so the complete solution will look like:
.main { background-color: rgb(254, 236, 89); opacity: 0.85; width: 960px; padding-top: 130px; padding-bottom: 87px; }
Hope this is the solution you were looking for.
Related
I want a UI simillar to the image in which corners above a view should be rounded in as shown in as image.
Something like this should achieve your desired result, just replace the div:before block with the item at the top in your screenshot if it is an image. If no image use div:before changing the color is box-shadow.
div {
position:relative;
width: 300px;
height: 80px;
background: #522d5b;
}
div:before {
content: "";
position:absolute;
top:-40px;
left:0;
height:40px;
width:300px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
box-shadow: 0 20px 0 0 #fff;
}
You need to use the below style and the image will be the same as per your requirement
borderBottomLeftRadius: number
borderBottomRightRadius: number
Below is the code sample you can refer to.
image: {
borderBottomLeftRadius: 25,
borderTopLeftRadius: 25,
}
one more solution is there
borderRadius:0,0,20,0;
Also, you can find more info in the view component docs.
I would like to customize this answer from a api. I tried with css grid but cant do it. I don't know if I am adding classes well
#import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
.image-grid{
--gap: 16px;
--num-cols: 5;
--row-height: 500px;
box-sizing: border-box;
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols),1fr);
grid-auto-rows: var(--row-height);
gap: var(--gap);
}
.image-grid > img {
width: 100%;
height: 100%;
object-fit: cover;
}
#media screen and (max-width: 1024px) {
.image-grid {
--num-cols: 2;
--row-height: 150px;
}
}
Bump. Any idea? Thank you!
-
Displaying 3 slides/images per view, looped, centered.
With a clean cache, Swiper starts with the last slide and misses the first to the right. Browser refresh seems to fix it: swiper starts/initializes with first slide, no blank slides remain.
The amount of images is dynamic.
UPDATE:
The issue is with the CSS we added:
.swiper-container {
width: 100%; height: 100%;
margin-left: auto; margin-right: auto;
}
.swiper-slide {
max-width: 1200px;
height: auto;
text-align: center;
line-height: 0;
}
.swiper-slide img {
height: 550px;
width: auto;
}
.swiper-slide:nth-child(1n) {
height: 550px;
width: auto;
}
Removing the very last bit (nth-child) resets the slider to always start with the first slide. But the images stop sitting next to each other, but instead are spread apart.
Created this to demonstrate a little quicker:
http://jsfiddle.net/L3b1fzh9/13/
You can remove the last few lines of CSS, because .swiper-slide:nth-child(1n) matches every single .swiper-slide element, so this selector doesn't actually do anything (n is a set of all integers, so when you multiply by 1 you just get 0, 1, 2, etc.).
The reason why the images stop sitting next to each other is that their parent container .swiper-slide has width: 100%. You need to change that to width: auto and add margin: 0 auto to center the slides.
So your .swiper-slide CSS becomes:
.swiper-slide {
max-width: 1200px;
height: auto;
text-align: center;
line-height: 0;
width: auto !important;
margin: 0 auto;
}
And just remove the .swiper-slide:nth-child(1n) CSS.
Updated fiddle
I am using a number of Pseudo elements throughout a website I am building. They all look great except in IE. I am testing it in IE 10 and 11 to start off with.
For some reason the positioning is always slightly off - in the example below, about 5 px for each element.
I have tried changing the display and positions, setting the origins, but nothing seems to work.
Any help would be appreciated.
.home .welcome-row h1 {
position: relative;
margin-bottom: 0;
}
.home .welcome-row h1:before {
background-image: url('/wp-content/uploads/2017/10/welcome-line-1.png');
-webkit-transform: translateY(-23px);
-moz-transform: translateY(-23px);
-o-transform: translateY(-23px);
transform: translateY(-23px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
.home .welcome-row h1:after {
background-image: url('wp-content/uploads/2017/10/welcome-line-2.png');
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
*EDIT - I have added any additional theme styles that are applied incase they have any relevance.
*:after,
*:before {
box-sizing:border-box
}
:-webkit-any(article,aside,nav,section) h1 {
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}
user agent stylesheet
h1 {
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
h1 {
margin: 0;
padding: 0;
}
this is my code:
<style type='text/css'>
div {
width: 100px;
height: 100px;
text-align: center;
font-size: 22px;
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.40, #ff0),
color-stop(0.5, orange),
color-stop(0.60, rgb(255, 0, 0)));
-webkit-transform: rotate(180deg)
}
</style>
<div id="test">click me to play</div>
the div rotate 180 deg , and the font is also rotate 180 deg,
but , i don't want the font rotate ,
what can i do .
thanks
unfortunately there's no existing solution yet! You either rotate the whole block (content, font and background included) or you don't rotate it.
Sorry!
You can find documentation on these two websites:
http://onwebdev.blogspot.com/2011/01/css3-background-rotate-property.html
http://www.sitepoint.com/css3-transform-background-image/
The later one offers a 'trick' solution that maybe could help, creating a 'fake' block containing your background.
#myelement
{
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#myelement:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
(source by sitepoint)
Why rotate it at all? Just describe your gradient the other way round:
background-image: -webkit-gradient(linear, left bottom, left top,
color-stop(0.40, #ff0),
color-stop(0.5, orange),
color-stop(0.60, rgb(255, 0, 0)));