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>
I am attempting to retrieve JSON data from this source: They have provided a 'how to' guide here: I have successfully connected with Authorization and received the raw JSON, but I am unable to format it into a table. This is the code I have wr ...
While looping through items, I am encountering an issue where an animation triggers when the loop returns to the first div. I simply need a way to switch between divs without any animations on a set interval. $(document).ready(function () { function s ...
Imagine I have the following sentence written in HTML: <p>Please input your licence number</p> An issue arises when a screen-reader pronounces the word 'licence' as "liss-ens" instead of "lice-ens." To resolve this, I aim to provide ...
Implement a while loop that continuously prompts the user to enter a color. If the color entered matches a CSS property such as blue, red, or #000000: The background will change accordingly, but if the user enters an incorrect color, a message will be dis ...
I've successfully implemented a footer that sticks to the bottom of each page as intended. However, I'm facing an issue when there's a large amount of text on a particular page that requires scrolling. The scroll continues beyond the footer, ...
Calling all coding experts! I've been working on customizing a Tumblr theme, and everything is looking good except for one issue. I'm struggling to adjust the width of photos on a permalink (post) page. Check out this link: You'll notice t ...
I am looking to implement a feature where clicking on the sidebar menu will reveal 2 submenus. Here is what I have implemented: $(document).ready(function () { $("[data-toggle]").click(function () { var toggle_el = $(this).data("toggle"); ...
Let's say I have the following data: <div class="info"><p><b>Orange</b>, <b>One</b>, ... <div class="info"><p><b>Blue</b>, <b>Two</b>, ... <div class="info"><p><b& ...
Why isn't this animation from display none to block working properly? The initial code appears as follows, and it functions correctly: $(".box_outer").stop().animate({top: '25px' , opacity: 1}, 100); When I add display: none; to the class ...
I am searching for a method to add animation effects (using @keyframes, transform...) to certain elements as the user scrolls down the page. For instance: When the offset is 0: the div will have a height of 100px. When the offset is between 0 and 100: th ...
Looking for a way to display small markers on the scrollbar of an overflow: scroll element, similar to features found in IDEs and text editors like this one: https://github.com/surdu/scroll-marker. I've considered using a pointer-events: none overlay ...
I have implemented a two thumb range slider to define the maximum and minimum values. However, I recently discovered that it is possible for the thumbs to cross over each other - the max value can exceed the min value and vice versa. I am looking for a s ...
I have a requirement to show a specific image multiple times based on user input. I have achieved this functionality successfully. However, I now need to display a number below each image. For example, if the user enters '4', there should be 4 im ...
Here is a basic table that I am attempting to iterate through in order to retrieve the value of each cell in every row where there are <td>s present. However, I encounter an error indicating that find does not exist despite having added jQuery. Any ...
Looking for a solution to extract images from a Word document, save them to a folder, re-link them back into the document and then convert it to HTML for uploading to our intranet site. Any suggestions on how this can be achieved? ...
Implementing this task may seem easy and common, but I am struggling to figure it out! What should take five minutes has turned into an hour of frustration. Please lend me your expertise in getting this done. I have a div container block: <div cla ...
I am currently utilizing the Ionic Framework along with its grid system that is reminiscent of Bootstrap. However, I believe my query leans more towards AngularJS than specific Ionic components. Here is what I have: <ion-col *ngFor="let col of row ...
Whenever I hover over my divs, I want them to change color. However, the code doesn't seem to be working as expected when I try to do so. I suspect that the issue might be related to the z-index property used in the class that I am trying to hover ove ...
I am working on a table with three columns that is styled using the Bootstrap class "table table-striped". However, I need the first column to be 100px in width, the second column to be 400px, and the third column to be 200px. How can I achieve this cust ...
I've been attempting to add ng-click functionality to my list, but it's not working as expected. I've tried adding the ng-repeat directive and also without it on li elements. Here is the snippet of HTML code: <ul class="nav nav-tabs"&g ...