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.
Related
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;
}
I have a sprite that I want to use defining a class to and not an id:
I want to use the white one to show expansion option and black one to show expanded state. For non expanded state I have a class sprite-right and want to use sprite-expanded for expanded state. Can anyone guide me through this? I forgot pasting what I did...duh!
sprite-right
{
overflow:hidden;
width:16px;
height:20px;
cursor:pointer;
background:transparent no-repeat 0 0;
background-image:url('../images/arrows.gif');
}
It's pretty simple to set up. You first need to set a class for applying the image as a background. Then add specific classes for each icon. Then in your CSS you change the background position, height and width to match the location of each icon. Here is an example:
.icon {
background-image: url('path/to/image.png');
display: block;
}
.icon.sprite-right {
background-position: 0 0;
height: 10px; // You can change these for each sprite
width: 10px; // You can change these for each sprite
}
.icon.sprite-expanded {
background-position: -10px 0;
}
.icon.sprite-right:hover {
background-position: -20px 0;
}
.icon.sprite-expanded:hover {
background-position: -30px 0;
}
Then, as you add new sprites you simply adjust the position until you can see the icon and then adjust the height and width until you are not clipping the image.
There are many great tutorials out there if you do a Google search. I use this tool alot when dealing with simple sprites.
Check out this link: http://labs.engageinteractive.co.uk/nav-o-matic/
Here is a codepen I forked so I can understand sprites a little better.
http://codepen.io/daugaard47/pen/lntzE
Study the code and it will start making sense to you.
Use background positioning to move your sprites to the desired class/state.
Hope this helps a little.
This post should help : http://mindthesemicolon.com/using-css-sprites/
It explains how to create and use sprites, with a code pen example.
I cannot solve a css problem.
I have a nav bar which should be transparent. But the links on it also get transparent due to the opacity attribute and because they are child elements of the transparent navigation bar.
can u help me to solve this?
If you dont want your link text to be affected you should modify the rule for the .container selector to look like this
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
it will keep your background color design without affecting your text
Opacity , as well said here several times , affect the element and its children
Using opacity . Text is affected
Using rgba(255,255,255,0.5), children not affected
Take care of the other rules that can take action due your javascript and hover situations
Fiddle here
Bis spater
The solution is easy. Just set the background-color CSS property to transparent.
.nav {
background-color: transparent;
}
In css3 you can use transparent backgrounds instead of making the whole panel transparent.
To add a transparent color you can do: rgba(255,255,255,.5) where the .5 is the opacity.
You should try just a simple css background property.
.navbar
{
background-color: transparent;
}
I use transparent png image (bg.png) with the desired opacity, and call it like this:
.menu
{
background: url('bg.png') repeat;
}
The png image can be small, even 1x1 pixel. The repeat is to fill the background space entirely.
its as simple as this
background: none;
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 am familiar with CSS techniques to replace text with an image. For example, here are 9 of them: http://css-tricks.com/nine-techniques-for-css-image-replacement/
Are there any techniques for replacing images? Is there anyway to set the background of an image to an image and then hide or move the foreground of the image (the image src element).
I am trying to write a skin for a site that has an image that I want to replace. Thanks.
From how I understand it he's trying to do this in pure CSS, with no changes to HTML or JavaScript.
That is correct. I am adding a new stylesheet to an existing page. Let say I can not modify HTML or utilize javascript.
After a little bit of tinkering, I figured it out!
img.someclass {
background: url("NEW IMAGE URL") top right;
height: 0;
width: 0;
padding: 200px 550px 0 0; /* Insert actual image size (height width 0 0) */
}
This will make the height and width of the actual image 0, but will expand the box to fill the size of the image with padding. The only downside to this is it won't look perfect in older versions of Internet Explorer.
If you have an element surrounding the image, e.g. a DIV, you should be able to set a background image (along with no-repeat and a position) on it, then set the image to display:none.
Alternatively, here's a haphazard solution that seems to work. It positions the image off-screen, then uses the :after pseudo-element to set a background image. It should be workable, but you'll need to fiddle with the values to get it working right. It won't work in IE6 though.
<style>
img.test {
background: url('image_to_show.png') no-repeat right top;
position: relative;
left: -16000px;
}
img.test:after {
content: ".";
color: transparent;
display: block;
width: 16000px;
}
</style>
<img class="test" src="image_to_hide.png">
The best way to replace images is to set the background position. First create the two different images and put them one above the other in the same image. Say your skin element is 50x50 pixels, you'd create a 50x100 image.
Then use some code like this:
.skinElement1 {
background: #fff url("image.png") no-repeat 0 0;
}
.skinElement2 {
background: #fff url("image.png") no-repeat 0 -50px;
}
So to view the second image you move the background up by the required amount. You could either use javascript or your server-side code to set the appropriate class.
Maybe you can set an opacity of an element and then set the background to the image you want.
Musicfreak: I meant using TWO elements.
you will have assign different classes for the two states then write some javascript to have the image change upon an event.
for example:
.firsImage { background:transparent url(/images/someImage.jpg) no-repeat; }
.secondIMage { background:transparent url(/images/image2.jpg) no-repeat; }
HTML:
<div id="imageDiv" class="firstImage"> some content </div>
<a onclick="changeImage()">Change the image!</a>
Javascript:
function changeImage(){
var imageDiv = document.getElementById("imageDiv")
if ( imageDiv.className === "firsImage" )
document.getElementById("imageDiv").className = "secondImage"
else
document.getElementById("imageDiv").className = "firstImage"
}