Here is an example:
Can this be achieved using only CSS?
I wish to create two divs:
I aim to have point 1 clip the background from point 2.
This will allow me to rotate the background, creating a visually appealing moving effect.
To create a clipped element using a compound SVG object, all you need is one div with the following CSS:
.clipped-element { clip-path: url(#clip-path); }
Additionally, you will require an SVG with the defined shape for clipping purposes:
<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'>
<clipPath id='clip-path'>
<path d='M100,250 A250,250 0,1,1 400,250 A250,250 0,1,1 100,250 z
M150,250 A150,150 0,1,1 350,250 A150,150 0,1,1 150,250 z'
clip-rule='evenodd'/>
</clipPath>
</svg>
Discover a stunning CSS animation combined with a unique shape.
The only drawback is the visible center cut out of the circle, which cannot be transparent and must match the background color. (You can set the inner circle's background to an image or any other suitable option, but transparency is not possible.)
Take a look at the CSS code below:
.circ {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url("http://www.freefever.com/stock/commercial-wallpapers-abstract-colored-texture-backgroundand-photo-high.jpg");
position: relative;
top: 100px;
margin: 0 auto;
overflow: hidden;
-webkit-animation: Spin 1s linear infinite;
}
.circ:before {
content: "";
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
@-webkit-keyframes Spin {
from {
background-position: 0 0;
}
to {
background-position: 0 100%;
}
}
For a live demonstration, check out this fiddle: Demo
Updated fiddle (addition of other browser prefixes): Demo
I recommend creating a separate CSS file for animations to keep your main CSS file organized, especially when dealing with keyframes that take up space. Consider using something like animations.css for your animations, separating them from the regular styles in your main CSS file.
If you require the center to adapt responsively to its background, consider checking out the solution provided by theChrisMarsh.
Feeling motivated? Take your creativity to the next level by experimenting with HTML5 canvas to create a unique design. Check out some awesome examples here: http://www.w3schools.com/html/html5_canvas.asp and also browse through some inspiring demos at http://davidwalsh.name/canvas-demos
Are two divs enough to solve this problem?
div{
border: 2px solid #ababab;
border-radius: 75px;
}
.outer{
width: 250px;
height: 250px;
background: #f0f0f0;
}
.inner{
width: 60%;
height: 60%;
margin: auto;
position: relative;
margin-top: 20%;
background: #eee;
}
Show us what you've attempted so far.
Utilizing background, field, border-radius, and animation can achieve the desired rotation effect.
html, span {
background:url(http://lorempixel.com/500/500/abstract/1) no-repeat center;
background-size:cover;
}
/* Opacity and display used to align middle for demonstration purposes */
html {display:table;height:100%;width:100%;}
body {display:table-cell;vertical-align:middle;}
div, span {border-radius:100%;animation:rot 5s linear infinite;transform:rotate(0deg);}
div {width:40%;
background:url(http://lorempixel.com/500/500/abstract/2) center;
background-size:20%;
opacity:0.8;
margin:auto;
overflow:hidden;
text-align:center;
box-shadow:5px 0 5px, 5px 0 5px inset
}
div:before {
display:inline-block;
padding-top:100%;
vertical-align:middle;
content:'';
}
span {
display:inline-block;
width:40%;
padding-top:40%;
vertical-align:middle;
box-shadow:0 0 5px, 0 0 5px inset;
background-size:1000%;
animation-direction:reverse;
}
@keyframes rot {
to {transform:rotate(360deg);
}
<div class="deco">
<span></span>
</div>
Is there a way to incorporate "metadata" (green and red lines in the image below) into a website? I might not have the correct term for it, so my apologies in advance. I attempted changing the following tag in the index.html file, but I am uncertain if thi ...
<script> function toggleContent(str) { if(str == 'recent' || str == 'old' && !($(".main_content").is(':visible'))) { $(".main_content").show(); } else if( str == 'newComment') { ...
My grid layout is causing some issues with the search box placement. Whenever a user starts typing in the input box, it jumps to the other side of the page. After investigating, I realized that the culprit is the position: absolute property. Oddly enough, ...
The V-tab below generates the button known as the right one on the v-app-bar: https://i.stack.imgur.com/DzNmq.png <v-tab :to="'/demo'" active-class="text--primary" class=&quo ...
This iframe contains a Google form that cannot be edited. I am looking for a way to close or hide this iframe, either through a button, a popup window button, or without any button at all. The $gLink variable holds the Google form link through a PHP sessio ...
My elements are all behaving correctly with the slidetoggle() function, except for my li:before class. I've attempted to manipulate the overflow, visibility, display, and other properties of both the :before pseudo-element and the li element, but the ...
I am encountering an issue with an inner div that is used for overlay and set to a min-height property. Despite changes in the overlay's height, the height of the outer div remains unaffected. #outer { width: 70px; height: 70px; background-co ...
I'm currently working on implementing a file upload feature with the use of Node.js, Vue, and Multer. Below is the Vue.js front-end code: export default { data(){ return{ selected: "How do you want to input the data?", options: [ ...
I need assistance creating a div with a CSS3 animated timer inside it when a button is clicked. Here is the code I have been working on: http://jsfiddle.net/arcco96/y5nov6rz/1/. Unfortunately, the div is not being created as expected. I believe the code sh ...
Currently, I am working on implementing a carousel using plain JavaScript without the use of any plugins. My goal is to have previous and next buttons that will control the sliding images. var firstval = 0; function ...
When viewing my website in Internet Explorer, I noticed that some elements appear taller compared to other browsers. After investigating further, I discovered that all these elements contained SVG images. It seems like they have a fixed height even though ...
Check out this Vue component template (View it on CODEPEN): <div class="some-class"> <v-form > <v-container @click="someMethod()"> <v-row> <v-col cols="3" sm="3" v-for="p in placeholders" ...
Encountering a unique situation with IE11 where a panel (DIV) transition is only activated on pageload if a media query matched the highest CSS specificity for the element. The issue does not occur on Chrome, Firefox, or Safari on tablets and phones. The d ...
How can I ensure that the mat-menu-item button is the same size as the mat-menu itself? For example, click here <div class="container d-block d-md-none"> <div class="row"> <div class="col d-flex justify-content-cent ...
Check out the content of my Class.php file: <?php class Class { public function validate() { if(empty($_POST['first_name'])) { return 'first name should not be empty!'; } elseif(em ...
I'm working with a table that can be found here: https://codepen.io/anon/pen/bjvwOx Whenever I click on a row (for example, the 1st row 'NODE ID 1'), I want the div with the id #divTemplate to appear below that particular row, just like it d ...
I am facing an issue with my Bootstrap 4 table where the fixed column widths specified in the header row are not being respected when the table is rendered. The Time column, for example, should only be 5% of the width but it is taking up more space than ex ...
Within my HTML form, I have implemented the flatPickr (calendar picker) component which generates an input field. I am currently exploring how to dynamically change the class of the input field if the error class function returns true. Below is the flatPi ...
Within a VueNative project that utilizes NativeBase as a component library, with tags prefixed by nb-, the code snippet below is found within the <template> tags of the footer.vue file which houses navigation buttons. This piece of logic successfully ...
I have been utilizing this interactive map from Wolf's website, but I am interested in incorporating a secondary list of countries alongside the existing one as the base for the script. However, due to presentation reasons, the second menu cannot resi ...