CSS3 DIV Rotating Animation Effect

Every web designer will like to play with div tag. Div is very usefull tag for web designer/ front end developer,
if you are using div with css3 properties so you can do a lots of things. Today, In this article we will create a simple div animation with css3 using “keyframes” & “transform” properties.


<section class="container">
    <div class="color01">
        <div class="color02">
            <div class="color03">
                <div class="color04">
                    <div class="color05">
                        <div class="color06">
                            <div class="color01">
                                <div class="color02">
                                    <div class="color03">
                                        <div class="color04">
                                            <div class="color05">
                                                <div class="color06">
                                                    <div class="color01">
                                                        <div class="color02">
                                                            <div class="color03">
                                                                <div class="color04">
                                                                    <div class="color05 center-div"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

body {
    margin: 0;
    padding: 0;
    display: flex;
      overflow: hidden;
}
.container {
    width: 400px;
    height: 400px;
    margin: 120px auto;
  overfolow:hidden;
}
.container div {
    width: auto;
    height: auto;
    padding: 10px;
    /*box-sizing: content-box;*/
    animation: olympic 500s linear infinite;
}
.container div.center-div {
    width: 50px;
    height: 50px;
    margin: auto;
}
.color01 {
    background-color: #1f1133;
}
.color02 {
    background-color: #5a1e40;
}
.color03 {
    background-color: #bc433f;
}
.color04 {
    background-color: #898dd8;
}
.color05 {
    background-color: #8fdad4;
}
.color06 {
    background-color: #a4ce6b;
}

@keyframes olympic {
    to {
        transform: rotate(-1800deg);
    }
}

How to Disable Right Click Using jQuery

When we talk about website security from Front End site, so many peoples will says first to disable right click. Today in this article we will write jquery script to disable the right click, It’s very simple with using jquery we can easily disable right-click.


<h1>Disable Right Click With jQuery</h1>

 

$(document).on("contextmenu", function(e) {
  alert('right click has been disabled');
  return false;
});

Pure CSS Auto Playing Slideshow

Today, In this article we’ re going to create Simple Auto-Playing Slideshow with help of css3, Every web designer need to add Slideshow to her project and for plane Slideshow they use some jquery plugin, using the plugin web page is taking a time for load, so we can avoid all jquery plugin and use simple css3 Slideshow without any jquery.

 


<div class="container"></div>

 

body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.container {
	width:320px;
	height:216px;
	margin:auto;
	animation: bg-animation 10s infinite;
}


@keyframes bg-animation {
	0% {
		background: url('http://www.99lesson.com/wp-content/uploads/2017/06/amazing-21-handwritten-amazing-free-fonts-for-every-creative-designer.png') no-repeat;
	}
	50% {
		background: url('http://www.99lesson.com/wp-content/uploads/2017/05/graphic-designers-mistakes.jpg') no-repeat;
	}
	100% {
		background: url('http://www.99lesson.com/wp-content/uploads/2017/05/99lesson-birth.jpg') no-repeat;
	}
}

21 Handwritten Amazing Free Fonts for Every Creative Designer

Use of best fonts our design look beautiful but to add a personal touch to your design content we will use Handwriting fonts. Handwriting fonts Designers can be use any type of design to add a personal touch. We also can use to create a logo.

In this collection I put some amazing handwritten fonts to use in your designs. So play with listed fonts and your creativity for personal and commercial designs.

01. Pacifico
Pacifico Font

02. Where Stars Shine The Brightest
Where Stars Shine The Brightest

03. Recorda Script Personal Use Onl font
Recorda Script Personal Use Onl font

04. Hey Pretty Girl font
Hey Pretty Girl font

05. Love & Trust
Love And Trust

06. Note This
Note This Font

07. TeenIdle
TeenIdle Font

08. Antique Book
Antique Book Font

09. As Cute As
As Cute As Font

10. Kalam
Kalam Font

11. Shrag Script
Shrag Script Font

12. Mervale Script
Mervale Script Font

13. Black Jack
Black Jack Font

14. Yellowtail
Yellowtail Font

15. Alex Brush
Alex Brush Font

16. Tesla
Tesla Font

17. Pecita
Pecita Font

18. 99 Occupy
99 Occupy Font

19. Gunny Rewritten
Gunny Rewritten Font

20. Halohandletter
Halohandletter Font

21. Whatever It Takes
Whatever It Takes Font

Top Common Designers Mistakes which can be Avoid

Today we will try to find out the most important Mistakes, which should not Avoid all designers. We should focus below point before working & delivered any project.

  1. Not Understanding Instructions
  2. Delivering a Poorly Written Creative Brief
  3. Not sharing your ideas and playing with marketing message and clients
  4. Not Asking for a client requirements before Starting a Project
  5. Not playing Before Designing
  6. Not choosing the right font’s
  7. Using too Many Different Colours in One Design
  8. Using too Many Different Fonts in One Design
  9. Hard to read text
  10. Over-Designing to the Point of Chaos
  11. Saving in the Wrong Design Formats
  12. Always copying other people’s designs
  13. Not Showing Clients Work in Progress
  14. Not clearly communicating the marketing message and clients
  15. Not scaling image properly
  16. Using blur imags
  17. Not Designing Logos in Vector Format
  18. Missing the point of design
  19. Forgetting White Space (Not Using White Space in Design)
  20. Not Setting Deadlines for Projects
  21. Over Commitment then Under-Deliver
  22. Not Aligned text and images
  23. Too much text in one line
  24. Using Image for design logo