I am trying to get the following behavior in my Flickity gallery:
Click anywhere on the entire image, and it advances to the next image.
I am finding that resizing (+hiding) the buttons isn't behaving as expected. Can anybody suggest a better approach? Website built using Semplice, the CSS I'm using is:
.flickity-prev-next-button.next {
width:100%;
height:100%;
opacity:0;
}
The corners of the image are draggable but not clickable when I style it this way. Weirder to me, the clickable region is shaped like a diamond.
I want the entire image to be clickable to advance the gallery. I'd be grateful for any help. Thank you.
You have some more default styling you need to overwrite:
.flickity-prev-next-button.next {
width:100%;
height:100%;
opacity:0;
top: 0;
right: 0;
bottom: auto;
left: auto;
transform: none;
}
Should do it
Edit: also your header makes it so you can't click images behind it. Personally I'd fix that by just making the header white.
Solved by defining a border-radius and background color for the Flickity control button.
My layperson's thought is that default background transparency in the button was affecting its shape. Only the "arrow" part had a color, the background was transparent, so the shape got defined by this into a diamond shape and that's why I had a "diamond" inside of the image that was clickable.
Once a border-radius and background color were added, the dimensions of the button were fully rectangular instead of the diamond shape of the arrow control.
.flickity-prev-next-button.next {
width:100%;
height:100%;
background: #333;
border-radius:15px;
opacity:0;
}
Related
How can i apply buttom inner shadow like this image in react native?
Buttom inner shadow
I think you refer to a radial-gradient applied on the background of the element.
Button {
background: radial-gradient(rgba(0,0,0,0), black);
}
There are options to manipulate the same gradient with % porcentages in order to get a thiner effect or thicker effect
Ok. I cant add comments so i am going with another idea. BUT this wont work if you have to click.
.container {
position: relative;
}
.container::after {
Position:absolute;
Inset:0;
Content:'';
Background: radial-gradient(rgba(0,0,0,0), black);
z-index: 1;
}
This trick will make a cover box that can add a filter style. But if you have to click something, we need to go further than this.
I downloaded a round button to use as a dialog close image. It looks round, but when I open in Windows Paint I can see it is actually a white square with the round button in it, and when I display it in a browser it shows the white square outline that I don't want. Is there any way to get rid of that?
Here is a jsfiddle that illustrates what I mean...
http://jsfiddle.net/xY9Kp/
<body>
<button id='b1'/>
</body>
#b1 {
background: transparent url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR2lu62vUif1sHaq-qhefoWeA2GZ9zBr2j7arVLHdfFTKwcoZSAKA') no-repeat center center;
background-size: 100%;
width: 24px;
height: 24px;
cursor: pointer;
}
Thanks in advance for any constructive input.
It's worth adding that your issue is not with CSS. Even though border-radius might help by simply hiding the white areas, you ultimately need to find an image with a transparent background. There is no way to alter the color of some of an image's pixels with CSS.
If you're browsing for icons, look for the ones with a checkered white-gray background -- this means it's actually transparent.
Add this to your CSS:
border-radius: 12px;
should do it
I am trying to create a hover over image from a single split PNG
How do I enable it so when the image is not hovered over, the top image will view, but when they hover over, the bottom one will show.
The technique you are asking for is called "CSS-Sprites". Here's a tutorial
It uses the background-position style. For the default state of your element, just set the image as background. Note that you need a fixed height (half the height of your sprite) to hide the second part of the image. You also need a width, because your button will contain no content, just a background. For the hover state, use a negative background-position:
.button-foo{
display: block;
height: 29px;
width: 110px;
background: url("http://i.imgur.com/sJu5vvo.png") no-repeat scroll left top transparent;
}
.button-foo:hover{
background-position: 0 -29px;
}
This means the image is moved up so the top icon in there is above the visible area of your button.
Try to make sprites there is many applications out there. Google Css sprites generator.
Or try this one its free http://csssprites.com. Then its just simple css or jquery if u want any effects.
I have a sprite map. In that sprite map there is 1x1px fragment that I need to use to create a background for an element (i.e. repeated).
Does CSS alone provide a solution for that? I am interested even if it is futuristic and will work only in IE12. For those who don't know what a sprite map is, I've attached an example.
https://static.anuary.com/9429dc4e7a395b6443ae58919f1416523a9a798dd54931cb0e5ed70c582766a4/public/images/sprite.png.
I don't know of a particular method that will let you clip a portion of an image to tile it as the background of an element. Since you only have a 1px x 1px fragment, why don't you use the standard background-color property or keep a separate graphic for this purpose? I prefer the background-color CSS property since you seem to be dealing with a solid color.
You can also go to CSS3.info to see what's coming.
You can try using CSS before or after pseudo elements instead of using placeholder tags
.icon::after {
position:relative;
display:inline-block;
overflow:hidden;
content:" ";
width:21px;
height:24px;
background:url(images/icons.png) -1000px -1000px no-repeat;
}
.icon::after {
background-position: -14px -24px;
}
I'm trying to figure out how I can adjust the css in my register.php page so that the gradient will fill the entire area like it does on my login page.
http://www.kansasoutlawwrestling.com/kowmanager/register
http://www.kansasoutlawwrestling.com/kowmanager/login
If you want to use the same background gradient image for both the login & register forms you can modify your CSS rule to position the gradient at the top of the registration box and apply a background color #E7E7E7 so that the bottom of the gradient fades into a solid color. Like this:
.register-style {
background: #E7E7E7 url("../images/login.jpg") no-repeat scroll center top;
}
Alternatively, you can create a taller version of the gradient image and use that in your .register-style class.
The simple answer is "make the gradient image a bit taller".
Alternatively, you can use CSS3 gradients.
http://www.colorzilla.com/gradient-editor/ will generate cross-browser CSS that works in "all browsers".
If you want to cover just the case you have on register.php, try to add these styles:
.register-style {
background-position: top;
}
.register-inside {
height: 276px;
}
.register-data {
padding: 20px 10px 20px 30px;
}
Doing so you'd position the gradient to top, make the block a little smaller so the gradient would fit and make the paddings of the lighter box a little smaller, so it would look better.
Also, if you have control over the register.php HTML, add class="text" to the inputs: they'd gain the same style the inputs on login page have.