I came across an amazing example by Chris Coyier showcasing a "read more" button. I attempted to replicate this by creating a simple fadeout effect from white to transparent, but unfortunately, I ended up with a grey gradient instead.
You can view my attempt here: http://jsfiddle.net/9adZ3/
If anyone has suggestions on how to fix this issue, I would greatly appreciate it. Thank you!
In his article, Chris Coyier points out that the keyword "transparent" actually refers to rgba(0,0,0,0), which is transparent black. So, when you create a gradient from white to transparent black, the result appears as gray.
If you want a transition from white to rgba(255,255,255,0), you'll get transparent white instead.
Check out this demo for reference: http://jsfiddle.net/FnfTA/
#fade {
width: 50px;
height: 25px;
margin: 0 0 0 -50px;
//specifically for mozilla browsers
background-image:-moz-linear-gradient(center bottom , #ebebeb, #999999);
//crafted for chrome users
background: #F6F6F6 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999999), to(#ebebeb));
// suitable for Internet Explorer
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999',endColorstr='#ebebeb');
}
Recently, I encountered an issue with a selenium script that I am running within another python program. Interestingly, this program runs smoothly when I am logged into the server using ssh as root. However, it refuses to execute properly when run by the w ...
I'm struggling with creating an overlay hover effect on an image that has transparency. The issue I'm facing is that the black background of the parent div element is filling in the transparent parts of the PNG image, making it look like those ar ...
I have a list of items in a listView that need to be visually grouped based on their class, displayed within boxes. For example, I have 5 items with the following classes: <div class="1"></div> <div class="1"></div> <div class= ...
Just getting started with HTML and I've been working on a project for my class. Here's what I've come up with: <font style="background-color: grey; color: white; display: block">Black and white copies $.10 per page letter/legal size&l ...
I'm currently developing an online marketplace and trying to convert all product information like name, price, and description into json format. I have a sample code featuring a selection of products displayed in rows. <div class='cakes'& ...
Discover more about the "position: absolute" attribute Remove the position property for troubleshooting After testing this page in Chrome, I encountered a confusion regarding the usage of the position property within the bg-container. To my surprise, del ...
When using jquery sortable, I am able to customize a placeholder inside a connected list specified in the connectWith option to visualize where the content will be dropped. However, I am struggling to find a way to style the actual list that contains the p ...
Within this form, I have 2 radio buttons: <form action='' method='post' onsubmit='return checkForm(this, event)'> <input type = 'radio' name='allow' value='allow' checked>Allow ...
Trying to figure out how to show additional content when a photo is hovered over without shifting the rest of the page's content placement? Looking for alternative solutions rather than using margin-top: -22%. Here's a link to the website in que ...
Why won't the image size change? I've attempted to adjust the width and height in the component and also tried styling with className, but no luck. The image only seems to resize when using a regular img tag. Here is my code: function Header() ...
Why does the document height appear smaller than the window scroll top value plus the viewport height when I reach the end of the document? Shouldn't they be equal? I've been struggling with this issue for hours and can't seem to figure it o ...
As a beginner in the world of jquery, I am attempting to assign a font awesome icon star (fa-star) to differentiate between admins and regular members within the group members bar. The usernames have been blurred out for privacy reasons, but my goal is to ...
Every link in the left menu has a padding-left: 15px;. This is done to accommodate a background image (the blue arrow). However, when text wraps (like in "Paintings, prints, and watercolours"), it seems to ignore the padding. I've searched extensive ...
I am currently working on a Rails app (4.0) and have incorporated Bootstrap 3 into my project. Both bootstrap.css and bootstrap-theme.css are stored in the stylesheets directory, while bootstrap.js is located in the javascripts directory. Most of the Boots ...
Below is the code snippet that I am using: [theme.breakpoints.only('lg')]: {} The above code works perfectly and shifts at the desired breakpoint. However, when I implement the following: [theme.breakpoints.between('1200', '1021&a ...
I am experiencing an issue with a link that is displaying as white and gray for "a" and "a:hover", despite my CSS file specifying otherwise. Firebug confirms this, but I can't figure out what is overriding it. Can anyone offer any insight? Below is t ...
I need to dynamically change the background image of a class using an external CSS file. The image should be randomly selected from a specified path. While I know how to achieve this in PHP, I am looking to implement it in the external CSS file instead. ...
Utilizing the Material-UI style to define the class. Now, I aim to adjust the height based on the browser's width. Is there a way to dynamically calculate this within makeStyles() or implement a workaround? This snippet below represents what I am t ...
I am facing some issues with my navigation bar. I am unable to adjust its size or position it at the center of the page. Additionally, despite setting the body width and height to 100vw and 100vh respectively, I am able to scroll both vertically and horizo ...
What's the best way to make this flexbox design responsive for mobile devices? I want the layout to look consistent across both desktop and mobile screens. The issue seems to be related to the responsiveness of the flexbox and the smaller size of mobi ...