Click here to view the image
I have successfully recreated part of it: a bottom with rounded corners, solid border, and solid colored background. However, I am struggling with achieving certain effects such as the highlighted top portion - where the background color is not uniform - and adding shadows to both the text and the bottom section itself. So far, I have utilized properties like
border, border-radius, background-colorFor a similar effect, take a look at: http://jsfiddle.net/rEHSL/
Check out the CSS3 property called box-shadow.
The CSS code for the background gradient can be found here -
CSS:
#test { color:#fff; font-size:18px; text-align:center; width:300px; height:100px; background:orange;
/* Inner and Outer shadows */
-webkit-box-shadow: inset 0px 0px 2px 2px rgba(255, 255, 255, 0.8),
0px 0px 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 0px 2px 2px rgba(255, 255, 255, 0.8),
0px 0px 2px 2px rgba(0, 0, 0, 0.2);
/* rounded corners */
-webkit-border-radius: 15px;
border-radius: 15px;
/* graident bg */
background: rgb(255,175,75); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,175,75,1)), color-stop(100%,rgba(255,146,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 ); /* IE6-9 */
How can I prevent a button from resizing based on the number of characters inside it? I have noticed that two buttons with the same CSS class are displaying different sizes due to the amount of text inside them. <button class="my-btn" type=& ...
I've created a document, but it's not linking to the external CSS file. I have added .css files in my code, but when I generate the document, it doesn't apply the CSS classes. Here is my code: <?php header("Content-type: application/vn ...
I have implemented a component loading and an interceptor to handle all requests in my application. The loading component is displayed on the screen until the request is completed. However, I am encountering an error whenever the component inside my router ...
For the past 20 days, I have been working with Sencha and learning a lot. I finally managed to access the device camera and capture photos using it. However, I am facing an issue where I am unable to display the captured image in a Div on my webpage upon c ...
Looking for some assistance with a table generated by a 3rd party control. The table consists of only one row and one column containing HTML text like this: <p> this is a test</p> <p> <input name="amount" type="text" value="th ...
I'm puzzled as to why a horizontal scrollbar is appearing in the feedback section. I've examined the elements but can't seem to pinpoint the issue. ...
Upon creating an HTML <form></form> object to capture a username, email, and password, I encountered an issue where the value returned is always undefined when accessing req.body.name or any other field. It seems like the form is not functionin ...
I am struggling with my ajax response as it seems to evaluate only some of the html, but not all of it. For instance, I have this code that replaces a div with the response from the request: eval(document.getElementById("test").innerHTML-xmlhttp.response ...
I am in the process of creating a user-friendly mobile interface for pdf reading. However, I want to incorporate more advanced features by developing my own pdf reader instead of relying on the pdf.js team's viewer. Is there a method available to rend ...
I am facing an issue with a link that triggers a search function. Currently, the link is working as expected. However, I am having trouble getting the search to be executed by pressing the 'enter' button. Here is my code snippet: $('#sea ...
Is there a way to apply an animation to each letter in a word individually when hovering over the word? I want the animation to affect each letter with an increasing delay, rather than all at once. For example, if scaling each letter by 1.1 is the animatio ...
Check out my website at Upon visiting the website on a PC, you'll notice that the navigation menu appears on the loader. Can anyone explain why this is happening? The only modifications I made to my CSS are: <style> .navbar-inverse { backg ...
I'm having trouble figuring out how to make the rect element change color to purple when the text is highlighted. Right now, only the text color is changing. Is there a way to achieve this using just CSS? The goal is for the rect to turn purple on ho ...
I'm currently developing a diagramming tool using HTML, CSS, and Javascript with SVG for the drawing canvas. This tool consists of predefined "building blocks" that users can place on the canvas, rather than allowing free-hand drawing of shapes. Each ...
I've noticed some unwanted white space on my website when viewing it in Chrome and Internet Explorer. It's interrupting the flow of text and I can't figure out where it's coming from. Can someone help me locate and remove this pesky wh ...
How do I resize an image according to the size specified in CSS, and ensure that it fits within a list of items where each item consists of both an image and a name? Currently, my code only displays the image in its original size. for(var i =0; i< o ...
What was the reason for specifying .footer-background to have a display: flex property in order to center the .copyright-text? Why did setting display: flex on .footer not achieve the desired result? .footer-background { background-color: #00008B; ...
In order to pause the execution of PHP/HTML code and resume it by clicking on a "continue" button, here is an example: <?php echo "Hello"; // I would like the PHP code to halt after printing "Hello" here. // Additionally, I would like to include a "C ...
Trying to incorporate both JWPlayer 6 and JWPlayer 7 into my expressJS, AngularJS project has been a challenge. While they each work independently without issue, bringing them together has proven to be tricky. In my index.html file, I include them separat ...
I'm having trouble getting my CSS styles to apply correctly to the input field. Can anyone help me understand why this is happening? If you'd like to take a look at the code, here are the links to the .html file and the .CSS styles. The goal is ...