I'm attempting to create a CSS3 shutdown button that resembles the design in this picture:
Here is what I've accomplished so far: this. However, I'm facing challenges making the "semi-circle" match the circle in the image's center, centering the "semi-circle," and preventing box-shadow from distorting the shape.
Any suggestions on how I can enhance my current setup? Thanks in advance!
Below is the CSS code for creating a shutdown button:
.shutdown {
border: 8px solid #0cf;
border-radius: 100px;
box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
height: 100px;
width: 100px;
}
.shutdown .inner {
border: 5px solid #0cf;
border-radius: 100px;
box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
height: 30px;
left: 30px;
position: relative;
top: 30px;
width: 30px;
}
.shutdown .bar {
border-left: 5px solid #0cf;
box-shadow: 0 0 10px #0cf;
height: 20px;
left: 47px;
position: relative;
top: -15px;
width: 0;
}
.shutdown .sub-bar {
border-left: 11px solid black;
height: 30px;
margin-left: 44px;
margin-top: -20px;
position: absolute;
width: 0;
}
Here is the corresponding HTML structure:
<div class="shutdown">
<div class="inner"></div>
<div class="sub-bar"></div>
<div class="bar"></div>
</div>
View the live demo here.
When I perform an addition operation in JavaScript, instead of getting the expected result of 4.5 + .525 = 5.025, I receive 4.5.525. Here is the code snippet: <!DOCTYPE html> <html lang="en"> ... <button class= "b ...
Does anyone know how to create a script that will automatically click a checkbox when the 'c' key is pressed? I would appreciate any guidance or assistance in creating this script. This is the desired functionality: $("#cHideChat").click(); ...
In my HTML document, I have a simple div tag that is absolutely positioned. In Chrome, when I set the CSS rule "right" to a fixed value in pixels and "left" to "auto", then use jQuery's position() method to determine its left position immediately afte ...
Struggling to create a scrollable box using flex The Box element with the id=scroll is not behaving as expected, causing content overflow How do I set the Box to overflow=auto and enable scrolling for the content? Spending countless hours trying to unrav ...
I've created a calendar in my code that displays events for each day. However, some event descriptions are too long and get cut off on the display. Even after attempting to use Word Wrap, I still can't see the full text of these events unless I c ...
I am interested in creating a radial menu using CSS3 transforms animations, similar to the example shown on this Wikipedia page or the flash version demonstrated on this website. Although there is a jQuery implementation available using canvas called Radme ...
There's something strange about the way this CSS is being used, and I can't quite wrap my head around it. .tablecontainer table { ... } I'm familiar with table.tablecontainer, which indicates that the class attribute is equal to "table ...
We have implemented an "export to PDF" feature that generates a detailed report when the button is clicked. The PDF generation process is powered by Rotativa. While the PDF is being generated, we want to display a message (which is easy), and then dismiss ...
Recently, I made the decision to improve the look of an online manual I have been working on for my company by incorporating Bootstrap. The manual is structured with a tree-view that contains titles linking to HTML files with information and CSS stylesheet ...
Looking for a quick solution. I want the option drop down to close when another div element is hovered over. First, open the drop down and hover over the red element on the right side. When hovering over the red element, I would like the drop down to clos ...
I have designed a landing page with fixed left and right images and content in the middle. It looks fine on desktop view, but on mobile view, the images are overlapping the content. How can I resolve this issue? <div class=" ...
Looking to showcase multiple images on a single line with specific height requirements and a nice reflection effect? Here's how I achieved it: All images must fit in height. They should be lined up in a row, cropping width if needed. A reflect ...
I have implemented a Bootstrap accordion with a toggle arrow. Here is an example: http://jsfiddle.net/zessx/r6eaw/12/ My question is, if I want to change the arrow with an image, what do I need to edit? Or how can I implement it? This is the image I want ...
Trying to add the text "Upload Profile Picture" in the center of a circle image, but it seems to not display when the code is executed. See below for the HTML and CSS code snippet: https://i.sstatic.net/A42rI.png <div class="small ...
Check out my code snippet on this fiddle http://jsfiddle.net/9m1Lba6u/ The code works perfectly on Google Chrome and Safari, displaying all numbers from 1 to the last one. However, when viewed in FireFox, it only shows numbers up until 99. Could there be ...
My goal is to insert a video into a container that has a width of 100% and automatically adjusts its height while maintaining the aspect ratio, but with a maximum height set. I want the video to completely fill the container even if some parts are cropped ...
I have spent the past few days trying to figure out how to solve my problem but haven't had any luck. My gulpfile is not compiling my css even though it should be. Originally, my gulpfile was set up for sass files and everything worked perfectly. Howe ...
Currently, I am encountering an issue with implementing a button to expand and collapse a "table of contents" in Bootstrap 4. The code I have so far can be viewed here: https://codepen.io/nht910/pen/RwwwyKB Code Snippet: <div class="main-wrapper col- ...
Within my Joomla website using the T3 template, I inserted the following "Custom Code" just before the closing </head> tag: <style type="text/stylesheet"> div.t3-sidebar.t3-sidebar-right{ background: #F8F8F8 none repeat scroll 0% 0%; ...
It appears that Bootstrap 4 has introduced a new method for updating the progress of your progress bar. Aim: Dynamically update the progress bar percentage upon click <div class="progress"> <div id='progressBar' class="progress-bar" r ...