最新的Javascript和CSS应用技巧荟萃文档格式.docx
- 文档编号:7038289
- 上传时间:2023-05-07
- 格式:DOCX
- 页数:9
- 大小:19.96KB
最新的Javascript和CSS应用技巧荟萃文档格式.docx
《最新的Javascript和CSS应用技巧荟萃文档格式.docx》由会员分享,可在线阅读,更多相关《最新的Javascript和CSS应用技巧荟萃文档格式.docx(9页珍藏版)》请在冰点文库上搜索。
一个折叠效果的留言插件。
Beercamp:
AnExperimentWithCSS3D
一个帮助你了解SVG和CSS能够实现什么效果的文章。
Covers:
AJS/CSSExperiment
使用CSS和javascript生成的音乐封面
AnimationonApple’spage
apple网站的iPhone4S页面上应用的效果
Experimentalanimationsforimagetransitions
一个3d图形过度效果,使用CSS3动画和jQuery
MaintainingCSSstylestatesusing“infinite”transitiondelays
这个演示允许你使用d-pad来移动角色,没有使用任何javascript。
主要效果使用无限的过渡效果延迟。
CSS3-Dclouds
使用js和CSS3变形创建的3D云
动画弹出个人信息框
使用css过渡来实现的动画弹出profile菜单
CSS3scrollingeffects
各种滚动效果的类库,例如,curl,波浪,反转,飞行等等,使用CSS3和js实现。
SpinthoseiconswithCSS3
一个简单的创建干净并且滚动的社交图标的文章
ScrollingtheZAxiswithCSS3DTransforms
如何创建z-scroll效果的文章
实用的CSS技巧
CSS3FamilyTree
不使用flash或者javascript,而只使用CSS显示组织结构和家族图谱的演示,拥有悬浮效果。
一定要看看这个文章IntroductiontoCSSPseudoElementHacks。
iOS-stylepopover
一个简单的生成ios选择框及其悬浮效果的技巧。
Timeline-StyleComments
一个干净并且简单的技巧来展示时间轴类型的留言方式
CSSTableGrid
非常棒的一个用来对齐列的技巧。
ConfirmationFeedbackButtons
这个文章介绍了如何根据不同状态来创建按钮的技巧。
纯CSS实现的3D简洁按钮设计
分享来自Zocial的72个超棒免费CSS3按钮
AcalendarinCSS3andjQuery
一个帮助你使用一些jQuery动画创建CSS3日历的教程。
OutdentingpropertiesfordebugCSS
学习如何debugCSS,一个简单的技巧就是标志一个CSS属性做为临时属性或者debug属性,然后将它添加到0列中去。
ShowMarkupinCSSComments
如何添加一些基本的标签到CSS注释中去的一篇文章
Selectivelydisplayingdata
这个技巧展示了如何选择性的显示内容,并且添加响应式的断点来创建响应式的,复杂的多列表。
RemoveMarginsforFirst/LastElements
如果你想删除顶端或者左边的margin,或者右边,下面的magin,你可以使用:
first-child和:
last-child
CSSDiagnosticsStylesheet
一个非常有用的代码片段帮助你debug你的CSS,或者找到HTML中的错误
RadioButtonsWithTwo-WayExclusivity
学习:
empty伪类选择其和jQuery,保证当你点击一个radio按钮的时候,其他列都关闭
TabbedNavigationWithCSS
一个优雅的带有下拉菜单的tab导航菜单,没有javascript。
非常干净的解决方案。
MenuWithNotificationBadgesWithCSS
一个实用的代码片段用来生成带有通知标识的导航菜单。
Stylingbasedonsiblingcount(slides)
一个超棒的基于sibling计算的样式。
非常实用的技巧。
Stuffyoucandowiththe“CheckboxHack”
使用checkboxhack技术,你可以使用一个连接label和checkbox来控制其它页面元素。
CSS3FacebookButtons
NicolasGallagher开发了一套不同颜色的facebookCSS按钮,大家也可以看看CSS3SocialSign-Inbuttons和FreeSocialCSS3Buttons
YouTubePopupButtons
这篇文章讲解了如何创建缺省状态的youtube按钮,拥有非常简单的细微边框斜面并且:
hover和:
focus时展示
CenteringintheUnknown
Chris教你如何实现居中web设计,对于父元素越了解,你就约容易的实现居中。
MicroClearfix:
ForceElementToSelf-ClearitsChildren
ChrisCoyier教你几个常用技巧来强制自清理子元素,包含了NicolasGallagher的代码片段
ConditionalCSS
一个非常不错的技巧帮助你条件式的加载内容。
*{box-sizing:
border-box}FTW
一旦你开始在CSS混合匹配各种不同单位,例如,使用%来设定宽度,em设定padding,px设定border,你肯定遇到box-model问题,你可以使用box-sizing:
broder-box来解决,这个IE8支持。
MultipleAttributeValues
如何不使用class来处理多属性值
DiagonalCSSSprites
使用diagonal来创建sprite。
DoubleClickinCSS
有没有方法在mobile上检测是否是tap还是双击?
阅读这篇文章你就可以了解!
Replacingthe-9999pxhack(newimagereplacement)
用来隐藏文本的代码
FightingtheSpaceBetweenInlineBlockElements
如何处理inline元素间的小空间,这里chriscoyier将讲解几个小窍门
CSSpointer-eventsandapureCSS3animatingtooltip
pointer-event属性允许你指定鼠标如何和元素接触的互动方式。
看看我们什么时候可以使用它。
Anatomyofamobile-firstresponsiveWebdesign
一个来自BradFrost的如何设计超棒响应式设计的文章。
如何开始?
你需要执行什么样的功能?
如何使用本地存储和appcache来优化?
SouthStreetProgressiveEnhancementWorkflow
超棒的响应式设计相关工具。
你绝对会用的到!
CSS实现的悬浮效果和导航菜单
这里我们收集最新的CSS悬浮和导航特效,希望大家能够喜欢!
分享5个来自tympanus的超炫图片幻灯效果和教程
Tympanus是一个超酷的前端技术博客,经常发布超酷的前端特效教程,今天小编我给大家推荐五个超酷的幻灯效果,希望大家能有机会用在自己的网站和项目中
CircleNavigationEffectWithCSS3
一个气泡式的CSS3导航
CreateaCSS3ImageGalleryWitha3DLightboxAnimation
扩展使用CSS的lightbox画廊,添加了一些hover特效,3D内容旋转,全部使用CSS
3DGalleryWithCSS3andjQuery
一个纯3D实现的画廊。
CreativeCSS3animationmenus
Marylou展现给你超酷的导航菜单特效。
HowtospiceupyourmenuwithCSS3
另外一个超酷的悬浮特效
Createazoomableuserinterface
如何使用csstransform来创建一个可缩放的CSS3界面
FlipboardNavigation
一个实验性的页面布局
Multi-directionhover
不同方向的hover效果展示
ExperimentalHoverEffects
悬浮效果的实验性展示
Over-the-tophovereffect
CSS和js技巧用来创建顶层的悬浮效果,使用transfomr-origin和transform-style属性及其3D属性。
AccordionWithCSS3
来自Marylou的accordion文章,使用纯CSS3实现。
ExpandingTextAreasMadeElegant
一个可自动扩展的textarea实现
FilterFunctionalityWithCSS3
使用CSS3实现的过滤特效
Anaccessible,keyboard-friendlycustomselectmenu
一个新的方式来实现更强的可用性。
视觉技巧
我们在web开发中使用很多图片和视觉元素来创建特定的效果,使用CSS3,我们不但能够提高加载速度,也可以是的视觉效果更加突出!
CreatetheIllusionofStackedElementswithCSS3Pseudo-Elements
创建一个图片叠加效果的特效
CSS3UnfoldMapwithPins
一个CSS3实现地图标示的代码片段。
TurnImagesIntoPostageStampsWithCSS3border-image
使用简单的方法实现图片邮戳
SlopyelementswithCSS3
使用css3利用对角线来创建特殊的视觉体验
CSSFlipClock
一个翻转的时钟实现显示特效
CSS3ImageStyles
如何使用CSS来实现完美的动态圆角图片,这里是第二部分
CreatingReusableandVersatileBackgroundPatterns
CSS和PS创建漂亮的背景图案
DiagonalGraphPaperGradient
一个非常不错的CSS技巧创建带有梯度的对角线图形
TuckedCornerEffect
一个非常干净的CSS技巧用来创建扁角特效,使用:
after和:
before来实现。
Scrolling…shadows!
一个CSS实现的滚动阴影特效
Multi-coloredCSSprogressbars
一个CSS实现的多颜色进度条
CSS3breadcrumbs
CSS3实现的漂亮当前位置特效
Adobe-likeArrowHeaders
AdetailedarticleaboutthetechniqueAdobeusestocreateheaderbarsformodulesonitswebsite。
一个adobe风格的箭头标题
AddingaTopShadowtoawebsite
使用body:
before来添加阴影特效。
Aflexibleshadowwithbackground-size
一个灵活的可自适应的阴影特效
StarRatingsWithVeryLittleCSS
使用CSS实现的漂亮评级系统
ConvertImagestoBlackAndWhiteWithCSS
使用转化图片成为白色或者黑色
PunchingHolesWithCSS
一个简单聪明的技巧来展示背景图片。
SimpleStylesforHorizontalRules
简单样式的水平线。
OptimizingGraphicsWithCSSMasks
这个视频将展示使用CSSmask来帮助高效处理并且使用fallback来支持非webkit浏览器。
Browser-SpecificCSSHacks
一个非常实用的指定浏览器csshack,很多都是我们需要常用的哦。
<>其它相关
CSS3Lasers!
一个悬浮的激光特效
TheDOMTree
超酷的自动通过js生成的页面dom树,绝对非常值得你一看。
本文由金枪鱼软件,金枪鱼软件刷流量、刷人气、刷QQ空间流量软件,站长必备软件发布共享!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 最新 Javascript CSS 应用 技巧 荟萃