I want to put two images in my ionic app like this.
and later this
i am testing this
ion-content {
background: url('../assets/imgs/Untitleddesign.jpg'),
url('../assets/imgs/Untitleddesign2.jpg') no-repeat !important;
background-size: cover !important;
}
You can load the first image as background-image and use background-color for the second
ion-content {
background-color: #ececec;
background-image: url('../assets/imgs/Untitleddesign.jpg');
}
But you could get the same effect even without images
ion-content {
background-color: #ececec;
background-image: linear-gradient(152deg, #7e6ecc 40%, #ececec 40% 100%);
}
To make the shape go over the content and partially cover it during the scroll you can use the gradient with transparency in an element positioned absolutely.
ion-content::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 99;
pointer-events: none;
background-image: linear-gradient(
152deg,
#7e6ecc 20%,
rgba(0, 0, 0, 0) 20% 100%
);
}
see: https://codepen.io/dpu/pen/VwLBZEQ
Related
I'm struggling with a bit of CSS, I want a black bar to show every X amount of pixels but I'd want it to increment by about 10px every time it is shown.
E.g first bar appears at 100px, second at 110 and the third at 120.
So far I have used the following background style to achieve the first part (show a bar every X pixels) but it isn't perfect either:
background: repeating-linear-gradient(white, white 1405px, black 210px,black 37.4cm)
Any css warrior out there that knows of a fix?
EDIT
So with a bit of trial and error I have succeeded in placing the line every 1405 pixels with the following code:
background: repeating-linear-gradient(white, white 1405px, black 1405px, black 1415px)
The problem persists however, the elements are in the place they belong, the line needs to appear after every element (hence the + 10px request).
This is what it looks like now: https://imgur.com/a/pokGCTk
It isn't always 1 element though, there might be more like so: https://imgur.com/a/veaVK44
The line still has to be placed behind the elements at a set interval (1405 pixels) but it has to increase by 10 every time. (so 1405 pixels, then after 1415 pixels, then after 1425 pixels etc.)
It's clear that with a simple linear-gradient we cannot have a non-regular pattern. Here is an idea using some transform and perspective to simualte your pattern where the distance between black line will grow:
body {
margin: 0;
perspective: 30px;
perspective-origin: top;
overflow: hidden;
}
.grad {
height: 100vh;
transform: rotateX(10deg);
transform-origin: bottom;
}
.grad:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -1000%;
right: -1000%;
background: repeating-linear-gradient(to bottom, #000 0, #000 10px, #fff 10px, #fff 50px);
]
<div class="grad">
</div>
Or you would need to use multiple gradient and adjust background-position. Something you can easily generate with SASS if you want many lines:
body {
margin: 0;
perspective: 30px;
perspective-origin: top;
overflow: hidden;
}
.grad {
height: 100vh;
background-image:
linear-gradient(#000,#000),
linear-gradient(#000,#000),
linear-gradient(#000,#000),
linear-gradient(#000,#000);
background-size:100% 10px ;
background-repeat:no-repeat;
background-position:
0 0,
0 50px,
0 150px,
0 300px;
}
<div class="grad">
</div>
Here a script provided by #Krypt1 to generate the above using SASS:
https://www.sassmeister.com/gist/15bd039fdd0803ed79d12762ad6da28f
For stripes to work exactly 10px each, you would need to change the repeating-linear-gradient to generate them every 10px from start to end. And then you can use another gradient to hide first 100px with white color, and then change to transparent to show the stripes.
Here's the snippet:
div {
width: 100%;
height: 200px;
background: linear-gradient(white, white 100px, transparent 100px, transparent),
repeating-linear-gradient(white, white 10px, black 10px, black 20px)
}
<div></div>
A solution which allows you to show background styling from elements behind is to use a pseudoelement positioned behind your div, and make use of rgba within your repeating-lenear-gradient to have transparent colours.
body {
background-color: #e0e0e0;
}
div {
position: relative;
height: 500px;
}
div::after {
content: '';
display: block;
position: absolute;
top: 100px;
right: 0;
bottom: 0;
left: 0;
background-image: repeating-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px);
z-index: -1;
pointer-events: none;
}
<div></div>
I have an image which covers an entire element using something like #myDiv {background-image: url("../images/background.jpg "); background-repeat: no-repeat; background-size: cover; background-position: center;}
Next, I would like to gray out the left side of the image similar to that shown below.
How can this be accomplished? It doesn't need to look exactly the same, but only similar.
You may use linear-gradients since you use background-image
html {
min-height: 100%;
background:
linear-gradient(to right, rgba(0, 0, 0, 0.75) 60px, transparent 60px), /* the gray, reset opacity to your needs : here 0.75 */
linear-gradient(to right, transparent 60px, red 60px, red 64px, transparent 64px), /* a red line ? */
url(http://lorempixel.com/200/200/fashion) /* and finally, image laying underneath gradients */;
background-size:
auto,
auto,
auto 100%;
}
you could play with a pseudoelement and a RGBA background, e.g.
#mydiv {
background: url(http://www.psdgraphics.com/file/cherry-wood.jpg);
width: 250px;
height: 400px;
position: relative;
}
#mydiv:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 30%;
background: rgba(255,255,255, .3);
}
Codepen: http://codepen.io/anon/pen/OyVYwe
Or you could simply add a transparent left border to the element, e.g.
box-sizing: border-box;
background-origin: border-box;
border-left: 50px rgba(255,255,255, .3) solid;
Codepen: http://codepen.io/anon/pen/ZbGNqL
Or you could use an inset box-shadow
box-shadow: 80px 0 0 0px rgba(255, 255, 255, .2) inset;
Codepen: http://codepen.io/anon/pen/avOrXE
Please do not vote for this answer as it was user3791372's comment (yet not yet an answer) and not mine. If you think it is the right approach, please provide a comment why you think so.
http://codepen.io/anon/pen/MaaWMB
<div id="mydiv">
<div id="sidebar"></div>
</div>
#mydiv {
background: url(http://www.psdgraphics.com/file/cherry-wood.jpg) bottom;
width: 230px;
height: 400px;
}
#sidebar {
background-color: white;
opacity: 0.2;
filter: alpha(opacity=20);
width: 50px;
height: 100%;
}
I'm not sure what is specific name for this shape but can I just called it "half Parallelogram" ? I want make this shape purely using CSS/CSS3. Any help? or tutorial?
You can do it using pseudo-elements like below. The approach is to cut out a triangle shape from the left-bottom and top-right of the box. This method can be used with either a solid color an image inside the shape as long as the body background is a solid color. When the body background is a non-solid color this approach will not work because the border hack needs a solid color background.
The advantage of this method is that it can support cuts of different angles at each side (like in the question where the hypotenuse of the triangular cut on either side are not parallel to each other).
div {
background: red;
width: 200px;
height: 100px;
position: relative;
}
div:before {
position: absolute;
height: 0;
width: 0;
content: ' ';
border: 20px solid white;
border-color: transparent transparent white white;
border-width: 20px 0px 0px 15px;
left: 0;
top: 80px;
}
div:after {
position: absolute;
height: 0;
width: 0;
content: ' ';
border: 20px solid white;
border-color: white white transparent transparent;
left: 170px;
top: 0px;
}
.with-img {
background: url(http://lorempixel.com/100/100);
}
<div></div>
<br>
<div class="with-img"></div>
Sample 2: You can also achieve a similar effect using gradients. Just 1 gradient is enough to produce a cut of similar angle on both sides. If different angles are required then two gradients should be used. However the multiple gradient approach mentioned here will not work when the body background is a non-solid color.
div {
width: 200px;
height: 100px;
position: relative;
}
.with-single-gradient {
background: linear-gradient(45deg, transparent 5%, yellowgreen 5%, yellowgreen 90%, transparent 90.5%);
}
.with-single-gradient.image {
background: linear-gradient(45deg, white 5%, transparent 5%, transparent 90%, white 90.5%), url(http://lorempixel.com/100/100);
}
.with-multiple-gradient.image {
background: linear-gradient(45deg, transparent 0%, transparent 90%, white 90%), linear-gradient(60deg, white 10%, transparent 5%, transparent 100%), url(http://lorempixel.com/100/100);
}
<div class='with-single-gradient'></div>
<br>
<div class='with-single-gradient image'></div>
<br>
<div class='with-multiple-gradient image'></div>
Sample 3: This can also be created using SVG and is the best method yet. All that it requires is just a single path element which creates the required shape.
<svg viewBox='0 0 100 60' width='200px' height='120px'>
<path d='M0,0 80,0 100,16 100,60 10,60 0,54z' fill='yellowgreen' />
</svg>
Tested on Chrome v24, Firefox v19, Safari v5.1.7 (on Windows) and IE v10. They are older versions but should work in the latest versions also.
Note: IE versions less than 10 do not support gradients as mentioned in this SO thread.
there's no thing as straight radius, but here you have some tutorials. For weird shapes, you need to use a combination of shape and negative space, basically using figures with the same color of the background . The good news is you could use "transparent" as color, so you can "fake" this figures in an easy way. See tutorials Shapes of CSS or yuo can use a generator like CSS Shape Generator or CSS Shape Generator 2 but they will highly depend on your needs. Personally, I'd use a BG image and be a happy camper
to make this shape you have to use pseudo class.
and i hope it will help you
div { display: inline-block; margin: 20px; float: left; }
shape {
width: 208px;
height: 130px;
background: red;
position: relative; }
shape:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-right: 29px solid #fff;
width: 179px;
height: 0; }
shape:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #fff;
width: 42px;
height: 0; }
demo
2 gradients and background-size can be used too :
div {
width: 1440px;
height: 590px;
background:
linear-gradient(45deg, transparent 80px, #FF0000 80px) left no-repeat,
linear-gradient(-135deg, transparent 160px, #FF0000 160px) top right no-repeat;
background-size: 50% 100%;
}
<div>
</div>
1 gradients and calc() can be used too :
div {
width: 1440px;
height: 590px;
background:
linear-gradient(45deg, transparent 80px, #FF0000 80px, #FF0000 calc( 100% - 160px), transparent calc( 100% - 160px) );
}
<div>
</div>
Related to duplicate question https://stackoverflow.com/questions/36932294/how-can-i-create-the-object-in-picture-below-using-css-border-radius :
div {
width:980px;
height:460px;
background:linear-gradient(140deg,transparent 200px, #FFCB05 200px) left no-repeat,
linear-gradient(-40deg,transparent 80px, #FFCB05 80px) top right no-repeat;
background-size:50% 100% ;
}
<div>
div shape
</div>
image
<img src="http://i.stack.imgur.com/M48zP.png" />
For the second shape use this:
border-bottom-left-radius:50px;
border-top-right-radius:50px;
Check JSFiddle Demo
Edit:
Question is edited and second shape has been removed.
You can add an element with overflow: hidden;
skew transform the parent by desired angle. Unskew the pseudoelement by the negative of that angle.
Using this approach, you can also add images to background.
div {
height: 100px;
width: 220px;
overflow: hidden;
position: relative;
-webkit-transform: skewX(45deg);
-moz-transform: skewX(45deg);
transform: skewX(45deg);
}
div:before {
content: '';
position: absolute;
left: 10px;
height: 100px;
width: 200px;
background: red;
-webkit-transform: skewX(-45deg);
-moz-transform: skewX(-45deg);
transform: skewX(-45deg);
}
<div></div>
FIDDLE
FIDDLE (with image)
I just trying to put a background color (rgba) with an image, but doesn't work.
My CSS is:
section{
width:100%;
height:400px;
background: url(../img/background2.jpg);
background-color: rgba(0,0,0,0.5);
}
I just trying to put with diferent positions, like background-image, or just background, but doesn't work.
As I pointed out in comments, background color behaves as a fallback for the background image, unless the image is transparent:
section {background: rgba(0,0,0,0.5) url(../img/background2.png) 0 0 no-repeat;}
If you want to cover the image by an overlay layer (using rgba()), you can create a pseudo-element and position that as absolute the use left, top, right and bottom properties to expand the overlay, as follows:
.box {
background: url(http://lorempixel.com/500/500) no-repeat center center;
position: relative;
}
.box:after {
content: ' ';
position: absolute;
left: 0; right: 0; top: 0; bottom: 0; /* Fill the entire space */
background-color: rgba(0,0,0,.4);
}
WORKING DEMO.
Does it have any content?
If so, you can use z-index property to move the overlay beneath the content which is wrapped by a relative positioned <p> element with a higher z-index value, as follows:
<section class="box">
<p>Content goes here...</p>
</section>
p {
position: relative;
z-index: 2;
}
.box:after {
content: ' ';
position: absolute;
z-index: 1;
left: 0; right: 0; top: 0; bottom: 0;
background-color: rgba(0,0,0,.4);
}
UPDATED DEMO.
Use transparent PNG as a background image and then you can see both color and image together.
section {
width:100%;
height:400px;
background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
background-repeat: no-repeat;
background-size: contain;
background-color: rgba(0, 0, 0, 0.5);
}
You can use rgba within the same declaration
DEMO http://jsfiddle.net/b6vzN/1/
background:url(../img/background2.jpg) no-repeat rgba(0,0,0,0.5);
If you wish to assign it seperately as in your example then you need to specify background-image, not just background
background-image: url(../img/background2.jpg);
background-color: rgba(0,0,0,0.5);
Is it possible to make only part of div transparent like an amount of space in div.
For example, you select 100px from top of div and the top 100px have an opacity set?
How would I do it?
You can do a couple of things:
Try a background image where half is transparent and the other half is not.
Use a CSS gradient in such a way that half is transparent and the other is not. Ex:
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */
Use multiple divs where one has transparent BG and the other does not. Ex:
<div>
<div id="transparent" style="background: transparent"></div>
<div id="not-transparent" style="background: #000"></div>
</div>
I'm sure there are other ways, but those are the first three that come to mind.
Good luck.
Either you create the right background-image using a semi-transparent PNG (transparent at top, opaque at bottom for example) ; either you use two sub-divs, each having its own background-color (one of which with rgba for the transparent part).
You can use css3 properties along with pseudo elements to create this effect:
The trick is to draw a box with :before or :after pseudo element. We can apply background property for inner semi-transparent background. While for outer background we can use a large box-shadow value.
HTML:
<div class="box"></div>
CSS:
.box {
position: relative;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
position: relative;
margin: 30px 20px;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
<div class="box"></div>