I try to make the ripple effect of the material design of lists that shows when try to swipe and this is the end and dont possible to swipe more.
I made
div{
height: 300px;
width: 50px;
position: absolute;
border-radius: 0px 500px 500px 0;
-moz-border-radius: 0px 500px 500px 0;
-webkit-border-radius: 0px 500px 500px 0;
background-color: black;
opacity:0.1;
}
<div>
</div>
and it look like a box with round corner. I make the effect with js by change the width and the opacity.
how to make the css more look like the effect ?
Thanks
Related
I have a div that has image on it done by uploading. It is quite working well until we uploaded diff image sizes. Problem came up when they uploaded a very big image and it is being cutoff (coz of overflow hidden) and just shows like a certain portion of the image, but if i remove the overflow: hidden, it becomes way too big. So then I put a transform(.20, .20) which worked well, but when user uploads a small sized image, it becomes really small because of the transform, which I don't like. I would like to put a min-width or like a conditional transform that if image is below 400px, don't transform it, or transform but not smaller as 400px square img. is that possible? I put min-width on several parts but nothing works.
here is my css & div:
.upload-viewer {
/*
border: 1px solid #e0246f;*/
margin-left: -199px;
height: 188px;
text-align: center;
background-color: #eee;
border: solid 1px #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 4px 5px;
transform: scale(.20, .20);
position: relative;
top: -70px;
margin-bottom: 50px;
}
<div class="upload-viewer">
<img src="" />
</div>
Min width sets the minimum width you should set the image width to 100%
Like this
.upload-viewer img{
width:100%;
}
Try using max-width
You can set a max-width prop at your img tag
For example:
.upload-viewer img {
max-width: 400px;
}
That way, it will not change your image width if it is lower than 400px, but will limit it to this width.
I'm trying to get a gap created within a div's border to fit an image, similar to this:
Is there a way to do this in pure CSS? All I can see is:
.box {
background: url(img.png) bottom left;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
But my problem is border-right: 1px solid #eee; creates a line on top of my image, which is of course not desired.
It needs to be responsive. This image is an example, but you get the general idea.
Something like this?
http://jsfiddle.net/6Ufb5/
div {
border: 1px solid #ccc;
position: relative;
}
img {
position: absolute;
top: 10px;
left: 10px;
}
Give the container position relative and the img absolute, shift it to left 10px and shift it down 10px from the top and you have what you desire.
For the responsive part, that's just giving the container and/or img a % width.
Like so:
http://jsfiddle.net/6Ufb5/2/
You can achieve this by using absolute positioning of the image element - and it has to be in a <img> element, not as the background image because it will never overlap the parent border (or even if it does by adjusting the background-position property, the border will lie on top of the background image... a behavior that is expected, by the way.
<div class="box">
Content goes here
<img src="http://placehold.it/300x200" />
</div>
And the CSS:
.box {
position: relative;
border: 1px solid #333;
}
.box img {
position: absolute;
bottom: -1px;
right: -1px;
}
If you want a dynamic and/or responsive solution, you might have to resort to JS to doing so - such as resizing the image depending on the box dimensions, and assigning a height to the box to take into account of the image height (since image is absolutely positioned, it is taken out of the document flow).
See fiddle here: http://jsfiddle.net/teddyrised/xH6UV/
This might work if you can alter your markup. For accessibility I think the image should be an image and not a background, and this method is responsive (though you may want to alter margins at small sizes with media queries).
http://jsfiddle.net/isherwood/79Js5
.box {
border: 1px solid #ccc;
display: inline-block;
padding: 10px 0 10px 10px;
width: 40%;
}
.box img {
margin-right: -10%;
margin-bottom: -10%;
width: 105%;
}
<div class="box">
<img src="http://placehold.it/200x100/f3f3f3" />
</div>
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.
Chrome is working fine in containing an image with an overflow:hidden rounded div, however safari does not do a good job at this, the overflow: hidden doesn't seem to work here.
here's an example
here is my sass code:
.profile-image-container
position: relative
top: 3px
display: inline-block
cursor: pointer
.profile-image
width: 33px
height: 33px
display: block
position: relative
border: 2px solid $default-border-color
position: relative
top: -5px
border-radius: 50%
-moz-border-radius: 50%
-webkit-border-radius: 50%
overflow: hidden
haml:
.profile-image-container
.profile-image
=image_tag "avatar.jpg"
%span.status.online
%i.icon.icon-check-small
fiddle:
http://jsfiddle.net/LB2EQ/
Problem 1. In Safari images don't inherit border-radius, so you'll have to add it.
Problem 2. Your image has a different width & height than the profile pic container which is why you'll see a very strange border-radius (only upper left) if you don't resize it.
.profile-image img{
width:33px;
height:33px;
border-radius:50%;
}
See working solution on jsfiddle: http://jsfiddle.net/LB2EQ/1/
I have following HTML and CSS, now I would like to position my popup window in middle of screen in any browser window size. Is this possible without JavaScript?
CSS:
.floating-window {
z-index: 9999;
position: absolute;
width: 200px;
height: 200px;
cursor: default;
-moz-box-shadow: 1px 1px 1px #888;
-webkit-box-shadow: 1px 1px 1px #888;
box-shadow: 1px 1px 1px #888;
}
HTML:
<div class='floating-window box'></div>
With percentages, you can set your box such that half of it is on the left side. So
width: 30%;
left: 45%; /* 50% (center) - 15% (half of 30) */
You could also use px but then you'll be limited to an absolute container width. Have you searched around? I know there are some articles explaining this method more extensively than I have.
Sure, it's possible, but how are you going to make it go away?
That's going to need JavaScript...