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