Skip to main content

List of categories of awesome effects css3 and javascript and Video Players

Here is the list of categories of awesome effects css3 
 
Creative Link Effects 

http://tympanus.net/Development/CreativeLinkEffects/

Website with video Player http://www.videojs.com/
http://www.w3schools.com/html/html5_video.asp
http://dev.opera.com/articles/html5-video-flash-fallback-custom-controls/ Website with video on home page

http://www.bienvillecapital.com/
http://www.theqcamera.com/

Creative Shapes pure css
http://codepen.io/rachel_web/pen/pjzowB


Create your own css 3 styles effect
http://www.createcss3.com/
http://matthewlein.com/ceaser/


Create css for Sprite Images (Retina Friendly)
http://www.spritecow.com/
http://spriteme.org/

Creaive and best websites 

http://interactivewall.ru
http://www.gsconto.com/chronicles/how-it-all-began.html
http://www.fusionessence.com/
http://www.designzzz.com/
http://hverdagsreisen.no/  (best)

HTML 5

Unicode character codes
http://unicode-table.com/en/#003C


Progress bar
 http://tympanus.net/TipsTricks/CSS3TimedNotifications/

Scrollbars with mobile compatibility
http://areaaperta.com/nicescroll/demo.html
http://enscrollplugin.com/

creative works
http://www.behance.net/ (Collection)
http://365awesomedesigners.com/ 
http://www.awwwards.com/  (Collection)


Personal portfolio
http://www.thetrueillusion.com/

html sound game
http://www.pluraldev.com/drumbit/


For Book website
http://tympanus.net/Tutorials/3DShadingWithBoxShadows/
 http://tympanus.net/Development/3DBookShowcase/

Browser Hacks css
http://mynthon.net/howto/-/webdev/CSS-big-list-of-css-hacks.txt
http://codemug.com/html/css-hacks-for-ie6ie7ie8ie9-and-ie10/


Menus
http://cdn.tutsplus.com/net/uploads/legacy/819_megamenu/demo/index.htmlhttp://tympanus.net/Development/MultiLevelPushMenu/index.html
http://tympanus.net/Tutorials/CircularNavigation/index.html
http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/
http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/
http://tympanus.net/Tutorials/YouTubeLeftSideMenu/#
http://tympanus.net/Tutorials/SwatchBook/
http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index2.html
http://tympanus.net/Tutorials/BlurMenu/
http://tympanus.net/Tutorials/MovingBoxesContent/
http://tympanus.net/Tutorials/AnimatedContentMenu/
http://tympanus.net/TipsTricks/CSS3MenuHoverEffect/
http://tympanus.net/Tutorials/OverlayEffectMenu/#
http://tympanus.net/Tutorials/CollapsingSiteNavigation/
http://tympanus.net/Tutorials/SlideDownBoxMenu/
http://tympanus.net/Tutorials/CufonizedFlyOutMenu/
http://tympanus.net/Tutorials/LittleBoxesMenu/   JQUERY
http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/          jquery
http://tympanus.net/Tutorials/RockingRollingMenu/   jquery
http://tympanus.net/Tutorials/BubbleNavigation/#      jquery
http://www.tympanus.net/Tutorials/FancyAppleStyleNavigation/    jquery
http://tympanus.net/Tutorials/FixedFadeOutMenu/#top    jquery
http://tympanus.net/Tutorials/FixedNavigationTutorial2/     jquery

tab menu
http://tympanus.net/Tutorials/CSS3ContentTabs/

accordion
http://tympanus.net/Tutorials/CSS3Accordion/index.html
http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/
http://tympanus.net/Tutorials/ExpandingImageMenu/
http://tympanus.net/Tutorials/ElegantAccordion/

Page scrolldown effect
http://tympanus.net/Development/HeaderEffects/
http://tympanus.net/Tutorials/ResponsiveHorizontalLayout/
http://tympanus.net/Tutorials/LateralOnScrollSliding/
http://tympanus.net/Tutorials/ScrollbarVisibility/index2.html


Page scrolldown with auto content load like facebook
http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

Animated books
http://tympanus.net/Development/AnimatedBooks/index2.html


Image captions
http://tympanus.net/Tutorials/PseudoElementsImageCaptions/
http://tympanus.net/Tutorials/CaptionHoverEffects/
http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/   (like google images)
http://tympanus.net/Development/StickyCaptionsConcept/
http://tympanus.net/Tutorials/3DHoverEffects/
http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/
http://tympanus.net/Tutorials/CSS3ContentNavigator/index2.html#slide-main
http://tympanus.net/Tutorials/AnimatedTextIconMenu/example1.html
http://tympanus.net/Tutorials/OriginalHoverEffects/

Hover effect
http://tympanus.net/Development/IconHoverEffects/
http://tympanus.net/Tutorials/ItemBlur/

Grid effects
grid loading effect
http://tympanus.net/Development/GridLoadingEffects/index.html
http://tympanus.net/Development/AutomaticImageMontage/index.html
http://tympanus.net/Development/FullscreenGridPortfolioTemplate/
http://tympanus.net/Development/GridNavigationEffects/example5.html#
http://tympanus.net/Tutorials/ImageWall/
http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/

Grid overlay
http://tympanus.net/Development/CircleFlipSlideshow/

search bar
http://tympanus.net/Tutorials/ExpandingSearchBar/

model window or pop ups
http://tympanus.net/Development/ModalWindowEffects/


Creative buttons
http://tympanus.net/Development/CreativeButtons/
http://tympanus.net/Tutorials/CSSButtonsPseudoElements/index.html
http://tympanus.net/Tutorials/AnimatedButtons/

Animation
http://tympanus.net/Development/PseudoElementsAnimationsTransitions/index.html
http://tympanus.net/Tutorials/CSS3BouncingBall/
http://tympanus.net/Tutorials/jQuerySceneryAnimation/

Creative form
http://tympanus.net/Tutorials/NaturalLanguageForm/
http://tympanus.net/Tutorials/CustomLoginFormStyling/
http://tympanus.net/Tutorials/LoginRegistrationForm/index.html
http://tympanus.net/Tutorials/FancySlidingForm/          JQUERY

page transition
http://tympanus.net/Development/PageTransitions/
http://tympanus.net/Development/FullscreenLayoutPageTransitions/
http://tympanus.net/Tutorials/FullscreenBookBlock/
http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
http://tympanus.net/Tutorials/FullscreenSlitSlider/index.html
http://tympanus.net/Tutorials/CSS3PageTransitions/index.html
http://tympanus.net/Tutorials/SlopyElements/
http://tympanus.net/Tutorials/LateralOnScrollSliding/
http://tympanus.net/Tutorials/WebsiteScrolling/index_vertical.html

Text animation
http://tympanus.net/Development/OpeningSequence/
http://tympanus.net/Tutorials/TypographyStyles/index7.html
http://tympanus.net/Tutorials/CSS3RotatingWords/
http://tympanus.net/Development/Arctext/
http://tympanus.net/Development/RockingLetters/
http://tympanus.net/Tutorials/SplashComingSoonPageEffects/index3.html
http://tympanus.net/Tutorials/TypographyEffects/
http://tympanus.net/Tutorials/InteractiveTypographyEffects/
http://tympanus.net/Development/SlidingLetters/

icons
http://tympanus.net/codrops/2013/07/31/freebie-famous-landmarks-icon-set-ai-eps-psd/


App Showcase
http://tympanus.net/Tutorials/AppShowcase/index3.html

Creative password technique
http://tympanus.net/Tutorials/HexaFlip/index4.html

Creative time table
http://tympanus.net/Tutorials/InteractiveSVG/
http://tympanus.net/Tutorials/3DTimeline/

Image efect
Flipping effect
http://tympanus.net/Development/CircleFlipSlideshow/
http://tympanus.net/Tutorials/CircleHoverEffects/
http://tympanus.net/Development/HoverClickTriggerCircle/#
http://tympanus.net/Development/FullscreenImageBlurEffect/
http://tympanus.net/Development/CircularDiscographyTemplate/
http://tympanus.net/Tutorials/ScrollingThumbs/
http://tympanus.net/Tutorials/CircularPortfolio/#       jquery
http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/  jquery


Image Gallery
http://tympanus.net/Development/3DGalleryRoom/index2.html
http://tympanus.net/Tutorials/ItemSlider/#
http://tympanus.net/Development/Stapel/
http://tympanus.net/Development/GammaGallery/
http://tympanus.net/Development/PFold/index.html
http://tympanus.net/Tutorials/BigVideoSlideshow/
http://tympanus.net/Development/Unfolding3DThumbnailsConcept/
http://tympanus.net/Development/3DPanelLayout/
http://tympanus.net/Development/3DGallery/
http://tympanus.net/Tutorials/CSS3FilterFunctionality/
http://tympanus.net/Tutorials/ProximityEffect/
http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/
http://tympanus.net/Tutorials/CSS3Lightbox/                   (lightbox)
http://tympanus.net/Development/WaveDisplayEffect/
http://tympanus.net/Tutorials/DraggableImageBoxesGrid/
http://tympanus.net/Tutorials/ResponsiveImageGallery/
http://tympanus.net/Tutorials/PortfolioImageNavigation/
http://tympanus.net/Tutorials/BubblerifficImageGallery/
http://tympanus.net/Tutorials/AnimatedPortfolioGallery/
http://tympanus.net/Tutorials/PolaroidPhotobarGallery/
http://tympanus.net/Tutorials/FullPageImageGallery/
http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/
http://tympanus.net/Tutorials/MinimalisticSlideshowGallery/
http://tympanus.net/Tutorials/FlickrPhotobarGallery/
http://tympanus.net/Tutorials/WonderwallMobileGallery/#albums_container
http://tympanus.net/Tutorials/FreshSlidingThumbnailsGallery/


Image Slideshow
http://tympanus.net/Development/StackSlider/
http://tympanus.net/Development/Baraja/
http://tympanus.net/Development/Windy/index.html
http://tympanus.net/Tutorials/VerticalShowcaseSlider/
http://tympanus.net/Tutorials/TriplePanelImageSlider/
http://tympanus.net/Development/AnimatedResponsiveImageGrid/index.html
http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/
http://tympanus.net/Tutorials/CSS3ImageAccordion/
http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/
http://tympanus.net/Tutorials/SlideshowJmpress/
http://tympanus.net/Development/ParallaxContentSlider/
http://tympanus.net/Tutorials/CSS3SlidingImagePanels/index2.html
http://tympanus.net/Tutorials/ElasticSlideshow/
http://tympanus.net/Tutorials/CircleNavigationEffect/
http://tympanus.net/Development/Elastislide/index3.html#
http://tympanus.net/Development/Slicebox/
http://tympanus.net/Development/CircularContentCarousel/
http://tympanus.net/Development/VerticalSlidingAccordion/example1.html
http://tympanus.net/Development/SlidingBackgroundImageMenu/example6.html
http://tympanus.net/Tutorials/RotatingImageSlider/
http://tympanus.net/Tutorials/SweetThumbnails/
http://tympanus.net/Tutorials/PhotoStack/
http://tympanus.net/Tutorials/PrettySimpleContentSlider/
http://tympanus.net/Tutorials/Billboard/

image slider
http://tympanus.net/Development/3DWallGallery/#26
http://tympanus.net/Tutorials/ThumbnailsPreviewSlider/
http://tympanus.net/Tutorials/PortfolioZoomSlider/
http://baijs.nl/tinycarousel/

image zoom
http://tympanus.net/Development/ImageZoomTour/index.html
Pagination
http://tympanus.net/Development/SliderPagination/

Audio Players
http://tympanus.net/Development/AudioPlayer/
http://tympanus.net/Development/CassettePlayer/
http://tympanus.net/Development/AudioSlideshow/

Drop Down Effects
http://tympanus.net/Development/StackSlider/
http://tympanus.net/Tutorials/CustomDropDownListStyling/index3.html

checkbox
http://tympanus.net/Tutorials/CSS3ButtonSwitches/index3.html
http://tympanus.net/Tutorials/CheckboxActions/

Loading effect
http://tympanus.net/Tutorials/LoadingAnimations/index.html

Box shadow
http://tympanus.net/Tutorials/BasicReadyToUseCSSStyles/#

Exact location
http://tympanus.net/Tutorials/RealtimeGeolocationNode/

Restaurant menu
http://tympanus.net/Tutorials/3DRestaurantMenu/

flipbook/flip effect
http://tympanus.net/Development/BookBlock/
http://tympanus.net/Tutorials/3DFlippingCircle/
http://tympanus.net/Development/FlipboardPageLayout/
http://tympanus.net/Tutorials/FullscreenGalleryThumbnailFlip/
http://tympanus.net/Tutorials/MoleskineNotebook/

Charts and bar graph
http://tympanus.net/Tutorials/MultipleAreaChartsD3/
http://tympanus.net/Tutorials/Animated3DBarChart/
http://tympanus.net/Tutorials/AnimatedSkillsDiagram/

overlay or Highlight areas for tutorial like gmail new changes
http://tympanus.net/Tutorials/CSS3AnnotationOverlayEffect/
http://tympanus.net/Tutorials/OverlayLikeEffect/#
http://tympanus.net/Tutorials/AnnotationOverlayEffect/
http://tympanus.net/Tutorials/ImageHighlighter/

animated banner
http://tympanus.net/Tutorials/AnimatedWebBanners/
http://tympanus.net/Tutorials/CustomAnimationBanner/

Tooltips
http://tympanus.net/TipsTricks/CSS3Tooltips/

sliding divs
http://tympanus.net/Tutorials/PullOutContentPanel/                      jquery example
http://tympanus.net/Tutorials/RelatedPostsSlideOuts/
http://tympanus.net/Tutorials/LatestPostSlider/
http://tympanus.net/Tutorials/EndPageSlideOutBox/
http://www.tympanus.net/Tutorials/FreshBottomSlideOutMenu/
http://tympanus.net/Tutorials/CSSOverlay/
http://tympanus.net/Tutorials/FixedNavigationTutorial/


news ticker
http://tympanus.net/Tutorials/CompactNewsPreviewer/

table effects with css
http://tympanus.net/Tutorials/CSS3Tables/

image edititng
http://tympanus.net/Tutorials/ImageVampUp/

Comments

  1. CSS Image hover effets

    http://www.corelangs.com/css/box/hover.html

    Ling

    ReplyDelete
  2. We have developed 17 desktop menus, 7 mobile menus and 119 responsive menus (with combination of desktop & mobile menu) and the number will increase by the day. You can also share these menu/ navigation on Facebook, Linkedin, Twitter, etc.

    http://www.uiplayground.in/responsive-menu-navigation/

    ReplyDelete

Post a Comment

Popular posts from this blog

10 jQuery Custom Scrollbar Plugins

10 jQuery Custom Scrollbar Plugins If you ever wanted to add some custom scrollbars to your website, to scroll the contents and the default browser scrollbars just doesn’t match up with your design, than make sure you check this list of 10 jQuery custom scrollbar plugins. Hope you find the following information helpful. 1. jScrollPane – custom cross-browser scrollbars Kelvin Luck’s jScrollPane was originally developed in December 2006. It is a jQuery plugin which provides you with custom scrollbars which work consistently across all modern browsers. You can style the scrollbars using simple CSS and they degrade gracefully where JavaScript is disabled. 2. Plugin JQuery : Scrollbar This page is written in french so use Google’s translate service to translate this page to your preferred language. Download is available for the plugin.  The purpose of this plugin is to add a scrollbar to the item of your choice, to view any content which is larger than the size – vizibl...

Contact us Forms Links

Hi Friends This is my second post to blogger.com. and this time I am going to share my few useful resource links with you all. This post is regarding to “How to create contact us form to the html page” So please go to the following sites 1) http://wufoo.com/gallery/templates/forms/contact-form/ Thats it
Hello Friends This is an important moment for me! This is the first blog I’ve ever written. It’s something I’ve wanted to do for a long time, but wasn’t sure how to do it, where, when, or even if. And finally, now here I am. People say that blogs are like a diary (do I hide it under my bed, lock it with a key? Tell it all my secrets? It seems like a wonderful place to share my thoughts with you, or what I do.) It’s going to be fun sharing my thoughts with you, outside the context of a book. Ok let me tell you about myself. I am a I.T Engineer and having 2 year experience about the I.T Sector. After Completion of my graduation i worked as a "Web Designer" for 1.3 years then i Switch my profile to software engineer and I am working as a Software engineer from 6 months. so basically my blogs are all bout to the new technologies, interesting and important codes and some useful resources. For more about myself please visit my website: http://www.lokeshchadha.co.cc/ . 1)..Downl...